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

componentDidMount fires twice when using TransitionGroup for animation

I'm currently using react-transition-group in conjunction with react-router-dom to animate route changes and this is working fine. The only issue I'm having is that when switching routes and I need to send or fetch some data in the…
NealVDV
  • 2,302
  • 3
  • 26
  • 51
-1
votes
1 answer

Error 'Element type is invalid …' when trying to use TransitionGroup, CSSTransition from react-transition-group

Sorry if this sounds like a duplicated question. I'm trying to learn how to use the react-transtion-group in typescript, however got the error. Here are my code: import React, { useState } from 'react'; import './App.css'; import { …
giang nguyen
  • 393
  • 4
  • 12
-1
votes
1 answer

Cannot prevent parent route from transitioning when transitioning a child route with react-transition-group

I have a chat application made with react and react router I used react transition group in order to animate between chats but the problem is that I have pictures in the chats and I wanted to display them to the user when he clicks on them and also…
-2
votes
1 answer

React Router. Why, when changing the route, the component is rendered 2 times, which causes 2 requests to the server?

I am using ReactTransitionGroup with ReactRouter. The goal is to reroute smoothly from one component to another. The problem - is that the component is rendered twice. An example of a component (view) that renders twice I am using the console to…
1 2 3
22
23