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

ReactTransitionGroup animation not playing on state change

I am trying to create an auto image slider with React and ReactTransitionGroup but I can't get animations to work. The image will change, but the transition effect won't play. I'm assuming it's the CSS because the class names do get…
Jordan Baron
  • 141
  • 1
  • 12
1
vote
0 answers

React History push re-rendering component with both new and old props

I am using React 17.0.2 with react-router-dom 5.2.0 and react-transition-group 4.4.2. I have a header component with a search bar. The concerned code is as follows const history = useHistory(); const [searchBarText, setsearchBarText] =…
MSM
  • 410
  • 6
  • 16
1
vote
1 answer

react-transition-group card flip animation

I'm pretty new to react-transition-group and I'm trying to build a card flipping animation. I'm able to get the first side to flip but it doesn't like the idea of staying put onto the back side. Any ideas what I'm doing wrong here? import {useState}…
LTFoReal
  • 377
  • 5
  • 20
1
vote
1 answer

Making an animation between states with React Transition Group, the animations overlap with each other

I have a simple component with some buttons that display text: You click on each different button whenever we want to display different text and I would like to have a simple fade animation when the text switches. What I am getting instead is a…
theJuls
  • 6,788
  • 14
  • 73
  • 160
1
vote
0 answers

TransitionGroup component laggs on exit-active

I am implementing a slider for components rendered by the router. Created a component with TransitionGroup to automate appending of the classes by CSSTransition, and the code can be seen in a sandbox here. I have added 8 classes (2x enter, enter…
borgmater
  • 658
  • 3
  • 11
  • 35
1
vote
1 answer

React CSStransition or React-spring in map()

Can someone explain how to make smooth transition like opacity 0 - opacity 1 with CSStransiton or react-spring animation, when data comes from server and i'm doing map div instantly appears without transition. i want to make transition on form…
Aw KingOftheworld
  • 131
  • 7
1
vote
3 answers

Animated react routes not working with component

I am trying to build a simple router for my React application, which would consist of a few routes generated from an array of objects and a static 404 route. The requirement is that transitions between every route must be animated. I am using…
goodpixels
  • 503
  • 1
  • 5
  • 20
1
vote
1 answer

React Transition Group: CSSTransition works on enter, not on exit

I have a React app that is using the CSSTransition component from react-transition-group: when the component appears, everything behaves as expected (a 0.5s transition from opacity: 0 to opacity: 1), however when the component exits, the transition…
LaikaTheSpaceDog
  • 105
  • 9
1
vote
0 answers

How to animate an image to the center of the page in react

I have avatar images that I want to expand and bring to the center on click. For that I'm using translate and scale: import React, { useEffect, useRef, useState } from "react" import { Transition } from "react-transition-group" function UserItem({…
Shining Love Star
  • 5,734
  • 5
  • 39
  • 49
1
vote
0 answers

CSSTransition and react-tabs, React.Children.only expected

I tried to make some animation to TabPanel, keeps sending me this error (Error: React.Children.only expected to receive a single React element child.) If i move the oputside the Tabs it works otherwise it throughs the error import React strong…
Shika
  • 11
  • 1
1
vote
0 answers

React "router-like" animations

I have a sidebar sliding menu that should act like a Router with transitions, but based on my app's state (redux) instead of routes. The first time the menu is opened the transitions works fine. But, when I change between two inner components of the…
Shining Love Star
  • 5,734
  • 5
  • 39
  • 49
1
vote
0 answers

React: how to separate one route from CSSTransition?

I have a few routes under a transition group like this:
sadmansh
  • 917
  • 2
  • 9
  • 21
1
vote
1 answer

CSSTransition nodeRef for component with direct children

I want to get rid of the warning on StrictMode for findDOMNode when using react-transition-group but I stumbled upon an issue. My component looks like this: class Slide extends React.Component { nodeRef = React.createRef(); render() { …
IceWhisper
  • 807
  • 1
  • 11
  • 20
1
vote
1 answer

getting react CSSTransition to work className is not changing

Hi I have been going throw this code for more than 4 hours now and still can't get it to work It cant be that hard to get a simple code like this to work By default sign in component should be hidden and on events it should appear Yet It is visible…
Fady Shaker
  • 15
  • 4
1
vote
1 answer

CSSTransition not showing transitions in React

Here's my slideshow.jsx file.I am trying to apply transition to a sample div containing Sample Text,but no transitions happening. import React, { Component } from 'react';
import styles from '../stylesheets/style.module.css'; import {…
Codebucks
  • 27
  • 6
1 2 3
…
22 23