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

Play animation before Unmount

I have a react app and I'm using the component from the react-transition-group package to create transition animations when the component is created and destroyed. I set the in prop in the componentWillMount cycle. However, I can't seem…
Ace Falobi
  • 741
  • 1
  • 8
  • 25
2
votes
1 answer

React TransitionGroup lifecycle methods not being called when component is loaded

I'm trying to animate a list entering and exiting with gsap, so I wrapped my list with . I want to use componentWillEnter and componentWillLeave to trigger my animations, but they aren't being called. I've checked everything 1000x…
DJO
  • 55
  • 7
2
votes
2 answers

Material-UI v1.0.0.-beta Issue with React-Transition-Group

While testing material-ui v1.0.0-beta, I encountered with the following error when building using webpack 3.8.0. I came across with few other questions like this, too, but am hoping if someone could confirm this is a legitimate issue and is still…
Kevin Ghaboosi
  • 606
  • 10
  • 20
2
votes
1 answer

React CSS transitions doesn't work

I'm new in javascript and coding and hope that professionals can give me advice. I'm trying to make CSS transitions with 'react-transition-group', but it doesn't work. I can't understand why it doesn't work: animations just don't show up. Console…
2
votes
1 answer

dynamic page sliding animation with React Router v4 and react-transition-group v2

I asked a question before about how to realize the page sliding animation: page sliding animation with React Router v4 and react-transition-group v2. After that, I got a more difficult problem. function getPathDepth(location) { let pathArr =…
jason
  • 195
  • 1
  • 2
  • 12
2
votes
1 answer

What is the best approach to build sequential animations with Reactjs?

There are various tools to help an individual to build animations with ReactJs. But each one has its own shortcomings. Following are the tools that I've explored till now: ReactCSSTransitionGroup : Quite effective but I don't like how it introduces…
1
vote
1 answer

I have a React problem where I receive *inline* props, but I need to update components with the props

Here's a custom component. interface ITransitionComponent { children: any; inProp: boolean; } function TransitionComponent({ children, inProp }: ITransitionComponent) { const nodeRef = useRef(null); let [status, setStatus] =…
ark_knight
  • 21
  • 6
1
vote
1 answer

self composed custom popper with transition effect desired like Mac OS UI (Using react-transition-group as support)

I put the full code here on CodesandBox. Click to check the real behavior now expected behavior: after users right-click a new position on the area, the Transition effect will remount at the new position until the old Transition unmount fully. real…
1
vote
1 answer

CSS Transition from React Transition Group not working and I can't figure out why

I have an app in which I'm trying to have the menu slide out from the left side. I can get it to just appear when the menu button is clicked. However, I'm using CSSTransition from React Transition Group to create the slide effect but it will not…
1
vote
0 answers

Exit animation not working properly in react-transition-group with React router v6

I am working on a React website which is currently using react-transition-group@4.3.0 and react-router-dom@5.0.1. I am updating both the libraries to latest versions- react-transition-group@4.4.5 and react-router-dom@6.4.1. Issue I am currently…
Mohit kumar
  • 447
  • 2
  • 10
1
vote
1 answer

React-transition-group. Animation not working

I am new to React. I want my rectangle to fade in and out when the button is clicked. I use for this. I do everything according to the documentation. Here is my component code: import React, {useRef, useState} from 'react'; import {CSSTransition}…
1
vote
0 answers

nested CSSTransition doesn't receive enter and enter-active and other classes on first mount

I have a CSSTransition component and inside it I have nested another one. my problem is that I want to set unmountOnExit on the outer CSSTransition and it causes to nested CSSTransition not to receive enter active and other predefined…
amir_70
  • 737
  • 1
  • 10
  • 27
1
vote
1 answer

react transition group doesn't apply css classes to targeted div

It doesn't matter if I use React transition group or tailwind or pure css or any other framework . if I write my simple component like below to show some transition, no transition will happen. here I used react transition group but I have tested…
amir_70
  • 737
  • 1
  • 10
  • 27
1
vote
1 answer

rootRef.current.contains is not a function on react-transition-group Transition Component on latest React and MUI v5?

I am migrating a project from Material-UI 4 to MUI v5, where I also upgraded react to v18. We are using Transition from react-transition-group on one of our components, inside of a Modal. I get a rootRef.current.contains is not a function error on a…
1
vote
0 answers

Animate list height when deleting items

I am using React Transition Group to animate in/out some list items, example: https://codesandbox.io/s/43v5wj62q9?file=/styles.css However I need to smoothly animate the list height whenever a list item is added/deleted, right now it just snaps to…
Sam
  • 375
  • 1
  • 5
  • 15