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

React-transition-group dynamic exit animation for SwitchTransition

I'm trying to make an app with a dynamic exit animation. Exit animation for SwitchTransition is set when the component is rendered and can't be changed later. It can be achieved using childFactory and TransitionGroup like here, but in this way the…
Andrew Savel.
  • 57
  • 5
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
2
votes
1 answer

How to use react-draggable with material-ui animations with react-transition group

Trying to use react-draggable with material-UI animations. One way is like this …
Hayk Safaryan
  • 1,996
  • 3
  • 29
  • 51
2
votes
1 answer

CSSTransition from react-transition-group not applying classes

I'm trying to integrate CSSTransition to my Gatsby site, but it is not applying any of the classes. I'm utilizing CSS modules, and I've got a
that serves as the parent that fades in and out, essentially applying the fade effect to this and…
Jesse Winton
  • 568
  • 10
  • 33
2
votes
2 answers

Slide animation between react divs -

I am using react-transition-group to help with managing transitions between elements. I am trying to implement a quiz where the questions slide over the other question after a user answers one question. However my transition makes it so that the the…
Nick
  • 175
  • 5
  • 13
2
votes
1 answer

Animations not working when entering (Tailwind, TransitionGroup, Typescript)

I've created a wrapper component to supply a list of class names via a string to support Tailwind utility transitions. This is intended to be nested in a TransitionGroup component to support animations of multiple items, like a list. I'm able to…
Steve
  • 592
  • 9
  • 24
2
votes
1 answer

How do I render divs horizontally without using flexbox?

I'm designing a website with ReactJS and Typescript and I want the pages each to live on a Card and when the user uses the Navigation bar, the current card slides away and the new one slides in. I am using react-transition-group to accomplish this.…
Cal Courtney
  • 1,279
  • 2
  • 10
  • 22
2
votes
0 answers

create a transition on every submit click with a new form

Ok so I have been trying this for a moment and I don't know how to go about it, what I want is simple, generate a brand new form but with a react transtion group effect from the old form to the new form (everytime a user clicks the submit button)…
bihire boris
  • 1,530
  • 3
  • 19
  • 44
2
votes
0 answers

reactjs: how to use TransitionGroup&CSSTransition with a redirect on login

I'm using Laravel & Reactjs with the react-router-dom. I have made a Reactjs login page that redirects the user to the dashboard home page but it doesn't use the csstransition animation. In the dashboard I have an navbar that works with the…
TimeParadox
  • 197
  • 1
  • 2
  • 16
2
votes
1 answer

use react-transition-group as child component receives new props

I have a child component where I would like to use slide-out animation as new props are getting passed to it and I try to use react-transition-group/switch-transition but is not really clear how to use it The child component render method looks as…
fefe
  • 8,755
  • 27
  • 104
  • 180
2
votes
2 answers

Nextjs + react-transition-group don't animate

I'am in trouble with nextjs + react-animation-group, I'have follow the docs to implement but doesn't work, i need to animate a component from opacity 0 to 1 in 2.5 sec. here my test: https://codesandbox.io/s/transition-group-u5htd you can see that…
DaveIt
  • 799
  • 1
  • 8
  • 15
2
votes
1 answer

Trying to implement react-transition-group into react-router generates error : 'Element type is invalid ...'

I am trying to use CSSTransition component from react-transition-group module to implement page transitions as a user switches from one route to another. From my code tested below, it generates the following error: Element type is invalid: expected…
Carl
  • 483
  • 1
  • 3
  • 14
2
votes
1 answer

Can nested switch use change page animation?

I have a problem about page changing animation I'm now using react-transition-group for my animation. The one inside app.jsx works just fine but I try to apply another animation to main.jsx but it's not working. Another can help? App.jsx …
Maulik Sakhida
  • 471
  • 4
  • 15
2
votes
1 answer

React Component Open and Collapse Animation with dynamic content

I have a Component which displays values dynamically to the user in a List , i want to be able to animate the opening and closing of the list based on the state . I choose React Transition Group as it is a very low lying Animation lib for React .…
INFOSYS
  • 1,465
  • 9
  • 23
  • 50
2
votes
1 answer

My component is animating after page load when the data is loaded in the useState

I am using useState() to load some data before the component is mounted. const [leaderboardData, setLeaderboardData] = useState([]); const [featuredSelectedItem, setSelectedItem] = useState({}); useEffect(() => { let dummyData = [ …
Jake
  • 120
  • 1
  • 7
1 2 3
…
22 23