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

285 questions
3
votes
1 answer

react transition group appear transitions not working properly

I'm using react transition group to handle animated CSSTransitions when a component is rendered. I want a simple fade in of a component. The transition out seems to work properly, but the in transition does not. If I put a debugger on the onEnter…
mheavers
  • 26,845
  • 54
  • 181
  • 285
3
votes
1 answer

What am I'm missing for React Transition Group Component when using it to build a carousel?

I just would like to have my opacity change between images.I'm building a Carousel and once you click on the icons the images change. I believe I'm missing the either an attribute or two or the logic and method I'm using it is in correct but I can't…
justkeithcarr
  • 609
  • 1
  • 5
  • 10
3
votes
0 answers

Animating rows in/out of a table with React Transition Group

Goal I'm currently attempting to use React-Transition-Group to animate the rows of a table in and out. There are two different scenarios that can happen: the entire contents of the table will be swapped out (most common option) individual rows may…
Zach
  • 690
  • 1
  • 9
  • 18
3
votes
2 answers

why is react-addons-css-transition-group not working here?

import CSSTransitionGroup from 'react-addons-css-transition-group' ; class VariableDefinitions extends Component { render() { const { idToVarStates } = this.props; const varHtmlList = Object.keys(idToVarStates).map(id => { return…
Natesh bhat
  • 7,780
  • 5
  • 52
  • 90
3
votes
0 answers

React transition group using gsap, Exiting and Exited not being called

I'm trying to use gsap for the animations and want to call these on the functions provided. Entering ones work but can't get the exiting and exited ones to fire. i'm setting a state variable on click to change in to false but its not rerendering. Am…
Adam
  • 946
  • 4
  • 22
  • 44
3
votes
0 answers

React - Using react-transition-group TransitionGroup in Nested Routes

I searched this issue but I could not find a solution with native react-transition-group. I have 2 components Home and Order. I use route transition for these. Everything works fine for these flat routes. …
baris usanmaz
  • 749
  • 1
  • 11
  • 30
3
votes
1 answer

Animate the show / hide of table rows in React

I have seen the examples of ReactTransitionGroup. In those examples, we are animating new and deleted table rows of a todo list. The animation shown in the example is a fade animation. How do I expand / shrink the table row instead of fade…
vijayst
  • 14,909
  • 15
  • 55
  • 99
3
votes
2 answers

How do I transmit a state to a parent component when clicking a react-router Link?

I want to build a single page application that works with transitions, that would look like follows: *------*--------------*-----------* | | | | | Shop | Landing Page | Biography | | | | …
Jaeger
  • 1,508
  • 1
  • 22
  • 39
3
votes
0 answers

Basic transition when component unmount with react-transition-group v2 (march 2018)

My code for setting up a Fade transition is the simplest : import React from 'react'; import { Transition } from 'react-transition-group'; import PropTypes from 'prop-types'; const duration = 250; const defaultStyle = { transition: `opacity…
arnaudambro
  • 1,680
  • 2
  • 13
  • 33
3
votes
1 answer

React Router throwing redirect warnings with TransitionGroup

I am using React Router with React Transition Group to animate between routes. I have a problem when I use a component. The App works, but I get multiple warnings from React Router that reads: Warning: You tried to redirect to the same…
Steve R
  • 90
  • 5
3
votes
0 answers

how to properly use ReactTransitionGroup

I'm trying to use React's TransitionGroup and Transition elements to implement the basic case of having my elements 'animate' in and out. I'm confused about the proper way to utilize the Entering, Entered, Exiting, Exited state as well as…
Alex Bollbach
  • 3,730
  • 2
  • 25
  • 61
3
votes
0 answers

How does Nested Transitions work With React Transition Group

So I'm having some trouble getting nested transitions to work with ReactTransitionGroup. What I am trying to achieve is I have an off canvas menu that appears on click (which is working) then within this off canvas menu there is a list of sections…
jeanverster
  • 274
  • 3
  • 9
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
  • 246
  • 6
  • 13
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
  • 485
  • 1
  • 4
  • 19
2
votes
0 answers

Update state send to child, before mounting a component in React using React-Transition-Group

I need to create some transitions and have a scenario in which the Child which is transitioned "in" should have a notion about its transition state. What i try to do is set a "transitionDone" state to "false" right before the transition and after…
brspnnng
  • 41
  • 1
  • 4
1 2
3
…
18 19