Questions tagged [react-transition-group]

Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.

Website / Docs

https://reactcommunity.org/react-transition-group/

Syntax

<CSSTransition in={inProp} timeout={200} classNames="my-node">
  <div>
    {"I'll receive my-node-* classes"}
  </div>
</CSSTransition>

Demo

https://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed

334 questions
1
vote
1 answer

Why does the enter-animation not run when mounting new page components

In this code example, the exit transition works, but the enter transition does not. I'm curious to if I approach this the right way of if this is a bug with styled-components. The goal is to animate to 50% off screen when exiting, and to animate…
Mikael Lirbank
  • 4,355
  • 2
  • 28
  • 25
1
vote
0 answers

Is it possible to prevent component unmounting during modal page transitions animated with CSSTransition?

Navigating to and from a modal route login (LoginModal) the underlying page component list (List) will not be unmounted. What is good. But wrapping the List page within a CSSTransition leads always to unintentional unmounts of this List component.…
1
vote
1 answer

why react-transition-group is not working?

I am trying to use animation when the state changes and elements mounts, tried the way mentioned in React Transition Group documentation but failed. I have a UI something like this: The center circle item is an active item and changes when the user…
saurabh
  • 2,553
  • 2
  • 21
  • 28
1
vote
1 answer

Animating a divs witdth temporarily stops when it hits Text content

I'am trying to remove a button with animation onClick. The animation starts, but once it hits the text content inside the button the animation slows down a lot. I have made codesandbox to show the issue: https://codesandbox.io/s/9y1pov351y As you…
Moddaman
  • 2,538
  • 3
  • 23
  • 41
1
vote
2 answers

Is it ok to use react-transition-group?

I've revived warnings from React when using react-transtion-group component (which is Transition) in React.StrictMode about legacy context API in the Transition component. and findDOMNode is deprecated. I intended to use react-transition-group…
1
vote
1 answer

Why React-Semantic-UI Transition not animating the Component?

I am having a Component which is a Modal alert. For animating the Modal, I am using the Transition from semantic-ui-react. But only a few animations(pulse,bounce, flash) are working and that too only while mounting of Component, and not working…
The Coder
  • 3,447
  • 7
  • 46
  • 81
1
vote
1 answer

"TS7017: Element implicitly has an 'any' type ... has no index signature" when I use react-transition-group

Here is my code: renderSoundWave = () => { const defaultStyle = { opacity: 1, transition: `opacity ${DURATION}ms ease-in-out`, } const transitionStyles = { entering: { opacity: 1 }, entered: { opacity: 0 }, …
Anthony Kong
  • 37,791
  • 46
  • 172
  • 304
1
vote
0 answers

Problem with exit and enter animations using react-transition-group

I'm new to React and I'm looking for some help. I'm trying to build a simple login page. The page gives users three options ('sign in with email', 'sign in with Google', or 'sign up') and displays a component based on the option chosen. I wanted to…
DSR
  • 11
  • 2
  • 4
1
vote
1 answer

React Transition Group prevent transition on param change

My application uses 'react-transition-group' to route between pages, but every time my portfolio id updates, it re-renders the entire component and runs the transition animation. How can I make it so that once you go to my portfolio page, it doesn't…
Tino
  • 11
  • 3
1
vote
1 answer

React Transition Group - Magnetic slider (change direction not working correctly)

I am trying to build a magnetic slider using react transition group. It works going only downwards, changing from down til up, going upwards but NOT changing from up til down. I guess I must be doing something wrong with childfactory. This post does…
1
vote
0 answers

React Check the render method of `Route`

I'm going crazy, i'm building some examples with the aim to learn reactjs. Actually I crashed against the TRANSITIONGROUP + ROUTER. I can compile without problems but then I get the following error: Element type is invalid: expected a string (for…
1
vote
0 answers

Fade in transition not working using reactjs transitiongroup

I need some help because I can't seem to understand what I'm doing wrong... Bellow is my render method from my component and the css used. What I'm trying to do is while the user is not authenticated to see a splash screen instead of the router. It…
0x_Anakin
  • 3,229
  • 5
  • 47
  • 86
1
vote
0 answers

How to animate a collection of elements using react state without clickevent?

I have a list of collections like so: class App extends Component { constructor(props) { super(props); this.state = { items: [ "https://images.unsplash.com/photo...", "https://images.unsplash.com/photo...", …
1
vote
1 answer

react-transition-group v2 and react-router-dom v4. Why animation change the data in both: inner and outer components?

I have a simple test stand of code, where we can see how the react-transition-group .v2 works unnormally with animations in navigation between paths via react-router-dom v4. Test stand: https://codesandbox.io/s/oxkw5prm56?from-embed Typically, this…
1
vote
1 answer

React-trancition-group. Transition does not work after migration from .v1 to .v2

I'm trying to migrate my app from old one to the new React-trancition-group API, but it's not so easy in case of using the manual mode for transition creation of the particular React component. My animation logic is: we have an array…
Max Travis
  • 1,228
  • 4
  • 18
  • 41