Stack Overflow
Stack Overflow

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
3
votes
1 answer

Why is react-transition-group not calling componentWillEnter nor componentWillLeave on route change?

I am following this hackernoon guide https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a in order to apply enter and leave animations to my react components when a route changes. I have…
Alejandro Corredor
  • 315
  • 5
  • 15
2
votes
1 answer

'CSSTransition cannot be used as a JSX Component' - Error in Dev but not Prod

Project created using React and Typescript. I'm using from react-transition-group to handle a small animation when opening/closing a menu. The animation effect seems to function just fine, but on every page load it displays a browser error related…
dcmswim
  • 108
  • 7
2
votes
1 answer

Context provider is unmounting when using React Transition Group with nested routes

I have an application with nested routes and am hoping to use React Transition Group to transition between the routes, both top level and nested. My challenge is that I have a context provider wrapping the nested routes. That context provider is…
jdimmerman
  • 124
  • 4
  • 15
2
votes
0 answers

React transition and React reveal error on enter component

I'm trying to implement a transition effect in my custom toast. I'm using react-transition-group and react-reveal to do it. The documentation seems very simple and i just followed this steps https://www.react-reveal.com/examples/advanced/todo/ The…
Ana Carol
  • 21
  • 2
2
votes
1 answer

How to center rotation axis properly in react-transition-group animation

I have problem with setting rotation axis in a animation of menu buttons in react webpage. Im using react 17.0.2 and react-transition-group 4.4.2. The concept of my menu is to rotate the button after it has been clicked. If other button was clicked…
M Uberna
  • 31
  • 5
2
votes
1 answer

I cannot get React Transition Group to work. No enter or leave transitions

Hi I cannot get React Transition Group working at all. Can anyone take a look at this and see why it will not work? The links pull in the components correctly but there are no transitions. No transition coming in or going out and the console.log…
cannon303
  • 403
  • 2
  • 12
2
votes
1 answer

React-Transition-Group: findDOMNode is deprecated in StrictMode

I am using the animation library react-transition-group in react for animating a TODO list using and as shown below
    {incompleteTodos.map((task) => ( …
Varun Sukheja
  • 6,170
  • 5
  • 51
  • 93
2
votes
0 answers

Using React SwitchTransition with Mount and Unmount Components

When mounting a component with a routing path I want to trigger a CSSTransition. My goal is to have the Component which is about to be unmounted persist long enough for the mounting component to fully transition in. An analog equivalency would be…
IzzyWorks
  • 31
  • 2
2
votes
1 answer

React CSS Transition Not Working On Exit Or Enter

This is within my component file
Hello …
Shooting Stars
  • 755
  • 1
  • 9
  • 20
2
votes
1 answer

Unknown gap between list elements during transition

I'm animating the height of li elements using react-transition-group and there is a pesky gap that forms between two elements before the middle elements transitions in. It can't be the margins What is causing this gap and how can I get rid of it?…
Bugbeeb
  • 2,021
  • 1
  • 9
  • 26
2
votes
0 answers

React Transition Group: Exiting transition not working when TransitionGroup children is in separate component

Faulty Behavior: On new adding new item, 'entering' is activated for all them items and when deleting item, neither 'exit' nor 'exiting' runs for deleting or any other items. Animations are working fine when transition children are directly inside…
Rujal Shrestha
  • 31
  • 3
2
votes
0 answers

How to convert react-transition-group code in typescript?

I am new to Typescript and Having a hard time converting this react-transition-group code into Typescript. I don't know many of the type definitions typescript is asking. I used @types/react-transition/group. Here is codesandbox link for the code :…
Mostafa Rafid
  • 71
  • 6
2
votes
0 answers

What is the exact difference between these two react-router Route approaches?

Can anyone explain the exact difference between these two Route syntaxes? {(props) => { return ; }} vs According to docs, the…
cweber105
  • 535
  • 1
  • 4
  • 21
2
votes
2 answers

How does react-transition-group CSSTransition work?

So I'm trying to use react-transition-group to animate the transition between the different sections of an app. I have the component I want to animate in the CSSTransition component in the following way: return (
German Cocca
  • 669
  • 1
  • 9
  • 17
2
votes
1 answer

How to animate nested routes using react-transition-group's CSSTransition?

I need to do some animations within nested routes (using react-transition-group v5.2.0, for what that is worth). Following the example, in the react-transition-group docs I am able to get regular routes animation going using CSSTransition, but the…
theJuls
  • 6,788
  • 14
  • 73
  • 160
1 2 3
…
22 23