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

Is there a way to delay the rendering of a component in react

I have a component that is using React Transition Group to animate a component as it changes from one component to the next. The problem I am having is that the next component is loading before the current animation is finished, so it looks a bit…
Steven Sheaves
  • 13
  • 4
0
votes
1 answer

CSSTransition:- React.Children.only expected to receive a single React element child

Below in my code. CSSTransition is not being recognized. It throws an error for some reason. I tried importing with and without braces, but it didn't seem to work. import React, { Component } from 'react'; import styles from…
Codebucks
  • 27
  • 6
0
votes
2 answers

TypeError: Cannot read property 'location' of undefined in react^16.13.1 react-router-dom^5.2.0

I am trying to add animation between react routers using "react": "^16.13.1", "react-router-dom": "^5.2.0", "react-transition-group": "^4.4.1". But an error occurs saying "TypeError: Cannot read property 'location' of undefined", How to solve…
Md. Hanif
  • 1
  • 3
0
votes
0 answers

Delay execution react-transition-group

Here is my Transition component:
maaajo
  • 839
  • 6
  • 10
0
votes
1 answer

Animating an unmounted component inside a react transition

This component is always rendered, but uses !!error for the Transition's "in" property. So it animates in when there's an error, and animates out when the error is gone. However, the error message inside of it also only renders when…
Jonathan Tuzman
  • 11,568
  • 18
  • 69
  • 129
0
votes
1 answer

How to use react-transition-group CSSTransition to animate on page load?

I have a sandbox with two components that render an animated div. One has a button which uses the in prop to render the animated div and this works ok. The other component is meant to animate once on page load. But there is no animation, it just…
Laurence Fass
  • 1,614
  • 3
  • 21
  • 43
0
votes
1 answer

how to correctly configure react-transition-group to independently animate nested animations?

I have added a nested route to the official React Router transition example. https://codesandbox.io/s/react-router-animated-transitions-lihls?file=/example.js I have used the default fade example on the outer switch and a "zoom" transition the…
Laurence Fass
  • 1,614
  • 3
  • 21
  • 43
0
votes
1 answer

React Transition Between Conditionally Rendered Components

I'm trying to transition between 3 conditionally rendered components when I click on them. I'm trying to achieve this by using TransitionGroup from the react-transition-group. This is what I have so far:
…
Shivam Sinha
  • 92
  • 9
0
votes
1 answer

No animation when using CSSTransition and Group Transition in Reactjs

In REACTJS, I am working with creating a simple App that contains Transitions. I have imported CSSTransitions and Group Transition in my file but when I am trying to apply CSSTransition for some of my news item but I am not getting the animation. It…
Waseem Abdullahi
  • 123
  • 3
  • 11
0
votes
1 answer

Not able to create a smooth scroll with CSSTransition Group

I am trying to use CSSTransitionGroup (or ReactTransitionGroup) to create a vertical smooth scroll effect for content as it appears and disappears from the dom. I am aware of ways to animate such an effect using transition in pure css, but I need…
Dog
  • 2,726
  • 7
  • 29
  • 66
0
votes
1 answer

React-transition-group Transition doesn't trigger animation on exit

My goal is to have an icon spin 90 degrees (become flat) and then to be replaced by another icon, creating a kind of coin-spin effect. I want then to spin on enter and on exit (there is a delay because of an XHR call). For some reason, the animation…
ilyo
  • 35,851
  • 46
  • 106
  • 159
0
votes
1 answer

TransitionGroup takes 486 seconds to remove 500 components

I'm using and ... and all transitions are set to take 2000ms in CSS. If I add and then remove a small number of entries, it takes roughly 2000ms for onExited() to be called as expected. But with 500…
Peter V. Mørch
  • 13,830
  • 8
  • 69
  • 103
0
votes
1 answer

Zoom in/out plates into fullscreen by using css or javascript

Does anyone know a library (preferably react) that could help in achieving such effect in zoom in/out when clicking on plate https://work.co/?
alex.mironov
  • 2,834
  • 6
  • 27
  • 41
0
votes
1 answer

react-tranisition-group use flex-box for react-router transition

I'm following the tutorial to add transition for react-router page use react-transition-group. My page content all wrapped into the container, and I use flex-box to center the container. However, it leads to transition cannot apply properly. I…
WhyINeedToKnowThis
  • 157
  • 1
  • 2
  • 9
0
votes
1 answer

react-transition-group and react-abc (abcjs) Midi will not work at the same time (depends on Key of parent component)?

I have a small React project where the user can add notes to a Row, and then play MIDI audio of the notes that have been added (using react-abc / abcjs). The selected Notes should also animate in, using react-transition-group. My problem is that…
damon
  • 2,687
  • 8
  • 25
  • 35
1 2 3
…
22 23