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
6
votes
2 answers

TransitionGroup and CssTransition: Exit transition not applied

I migrated from the old CSSTransitionGroup to the new react-transition-group CSSTransition and TransitionGroup. I'm creating (hacking) an overlay loader and I'm trying to apply animation to the overlay when it appears and disappears. Specifically…
Leonardo
  • 4,046
  • 5
  • 44
  • 85
5
votes
1 answer

Right and left sliding with react-transition-group

I want to make left and right slide with react-transition-group. When I press next button it comes right (next step) and when I click go back button, I want to come it from left. My code always gets it from right side. How can I achieve something…
edwardthatch
  • 69
  • 1
  • 5
5
votes
2 answers

React Transition Group with Tailwind CSS

I am trying to implement carousel using , , we have to import…
Sujay Prabhu
  • 151
  • 4
  • 14
5
votes
1 answer

React Router + Animation libraries problems: components won't animate before unmounting with react-router-dom

I have the following code: import React from "react"; import { BrowserRouter, Route, NavLink } from "react-router-dom"; import { AnimatePresence, motion } from "framer-motion"; import Hi from "./Hi"; import Something from "./Something"; import…
Herman
  • 623
  • 1
  • 6
  • 10
5
votes
1 answer

How to prevent component re-render (update) inside animations with REACT

These past few days, i've been playing around with different animation libraries for React, in an effort to find a solution for transitioning between views (not routes), where a view would be a component wrapping other components and so on. so far i…
man
  • 498
  • 5
  • 12
5
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
  • 29,530
  • 58
  • 194
  • 315
5
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
  • 871
  • 1
  • 11
  • 21
5
votes
1 answer

Mocking animation completion callback in jest

I'm trying to write a unit test with Jest for a Reactcomponent that utilises Transition from react-transition-group. I need to mock the Transition so my tests don't have to wait for the animation to complete. However, in addition to 'skipping' the…
artooras
  • 6,315
  • 9
  • 45
  • 78
5
votes
1 answer

Working from a 2017 react-router react-transition-group example where content components don't render

The demo and code => https://codesandbox.io/s/73ymn2k911 Based on my observations through dev tools, it initially knows where to place components but forgets to set opacity: 1 or remove the old components I suspect the issue lies in app.js See…
Tom Chapman
  • 433
  • 7
  • 15
5
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
  • 2,403
  • 3
  • 25
  • 51
4
votes
0 answers

react transition group: switch elements that can become null

I'm trying to animate a component entering and leaving the dom, but I also want to animate it being replaced with another instance of itself. I tried everything on react-transition-group and nothing works as I expect. There is Transition group,…
Danielo515
  • 5,996
  • 4
  • 32
  • 66
4
votes
2 answers

Custom page / route transitions in Next.js

I'm trying to achieve callback-based route transitions using Next.js's framework and Greensock animation library (if applicable). For example when I start on the homepage and then navigate to /about, I want to be able to do something…
cheng
  • 1,264
  • 2
  • 18
  • 41
4
votes
0 answers

React Router v6.0.0-beta0 - Animating route transitions with TransitionGroup and CSSTransition

My app has two routes: Step1 and Step2 and a Next button that takes you from Step1 to Step2. I would like to animate the transition between Step1 and Step2 so that when the user clicks Next, Step2 slides into view from the right while Step1 slides…
user51462
  • 1,658
  • 2
  • 13
  • 41
4
votes
1 answer

How do I get SwitchTranition to work with CSSTransition with TypeScript

So I have been using react-trasition-group to perform transition on different states of the same element and all is working fine there. The problem arises when there are multiple(two) elements to transition between. I am not sure how it works in the…
Nikhil Raj
  • 81
  • 8
4
votes
1 answer

Reactjs: Wait for animation to finish

inside my react app, users are able to enter data that is saved on the server. The data is saved immediatly, users don't have to press any "save" button. I want to display a short animation (similar to https://codepen.io/Sixclones/pen/VBdeXL)…
schadenfreude
  • 212
  • 4
  • 15
1
2
3
…
22 23