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
1
vote
0 answers

Using react-transition-group with React Router V6

I need to use react-transition-group for my exercise. In the example with React Router v5 the code looks like this:
endlessslash
  • 11
  • 3
1
vote
1 answer

React Transition Group: How to pass ref to mapped component to avoid Warning: findDOMNode is deprecated in StrictMode (still not working)

I am using "React Transition Group" ver 4.4.2 to animate menu buttons (CSSTransitions mapped inside TransitionGroup), but when I click them ones or a couple of times I get the warning: "Warning: findDOMNode is deprecated in StrictMode. findDOMNode…
M Uberna
  • 31
  • 5
1
vote
1 answer

React Transition Group - i dont understand it well

I'm trying to make an array of images that changes image every few seconds. I made it change randomly and now I'm trying to add transition so it so it will look prettier. The only way I saw it's being possible with React is using…
Yarden Yosef
  • 63
  • 9
1
vote
1 answer

Run CSSTransition inside TransitionGroup when any value changes

I'm looking at the TransitionGroup documentation example, and I'm trying to update it to run the CSSTransition whenever the text value is updated for an existing item. I have set up a codesandbox to show my current attempt. const [items, setItems] =…
MrK
  • 652
  • 1
  • 5
  • 17
1
vote
1 answer

react-transition-group does not animate

I use React and tranct-transition-group to write carousel components But I encountered the problem that the animation does not take effect. The code is as follows Link https://stackblitz.com/edit/react-ts-mi8mwj?file=Carousel.tsx Carousel.tsx import…
Gy-Coder
  • 13
  • 3
1
vote
0 answers

Animation on form React

I am stuck, I am adding amination on form on every radio button click, next question should Slide Up , but this is not happening sliding is happening only on first question.
user18246964
1
vote
1 answer

Why does the animation resets after the dropdown is shown in react-transition-group?

I am trying to animate the arrow in the dropdown component that I am currently working on, and I expect the arrow to rotate by 180 degrees when the dropdown opens and when it closes it should go back to normal. Here is the code import React, {…
Ayush Kumar
  • 494
  • 1
  • 6
  • 21
1
vote
0 answers

List not animating when updating it using 'react-transition-group'

What I am doing wrong? Thanks in advance const CardsContainer = (props: CardsContainerProps) => { const { cards } = props let inactiveCards: Array<{ card: Card active: boolean }> inactiveCards = cards.map((card)…
Laiacy
  • 1,504
  • 13
  • 18
1
vote
1 answer

React CSSTransition

I am creating side drawer using CSSTransition group it working fine but time delay in opening and closing drawer is very fast. import React from "react"; import ReactDOM from "react-dom"; import { CSSTransition } from…
Himanshu Kumar
  • 43
  • 5
1
vote
1 answer

findDOMNode is deprecated in StrictMode. Warning - react-transition-group + react v17 + Javascript (Not Typescript)

I'm trying to get rid of a warning message in the project I'm working on. index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the…
Gabriel
  • 59
  • 10
1
vote
1 answer

CSS transition , react-transition-group and React.findDOMnode deprecation

I encountered a Warning relative to the findDOMnode deprecation when trying to use react routing in combination with react-transition-group, the warning stated: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an…
Marc Abdel Wahed
  • 53
  • 7
1
vote
1 answer

React Transition Group: What is the purpose of TransitionGroup?

I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following: The component manages a set of transition components ( and…
MikeTheTall
  • 3,214
  • 4
  • 31
  • 40
1
vote
0 answers

Exclude nested route from transitions

I have a simple gallery app that has 2 top-level routes. One of the them ('/album') has a nested route called '/image' that accepts imageId as a parameter ('/album' accepts :albumId). I would like not to apply transition when switching images in the…
Tihomir Mitkov
  • 846
  • 1
  • 11
  • 20
1
vote
1 answer

Unexpected behavior of React render props

I've come up with the following code using React Transition Group: const Transition = ({ elements, selectKey, render: Element, ...props }) => ( {elements.map((element) => (
satma0745
  • 667
  • 1
  • 7
  • 26
1
vote
0 answers

React Transition Group Transition Enter Animation Doesn't Work with unmountOnExit?

I created a transition with react-transition-group and added unmountOnExit, which causes the enter animation not to work. When removing unmountOnExit, the enter animation works. Here is a CodeSandbox demo I opened an issue on GitHub but I was…
Anatol
  • 3,720
  • 2
  • 20
  • 40
1 2 3
…
22 23