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

React Router - Switching when next page has loaded entirely

I'm using react-router with react-transition-group to switch between full page components (think a simple book). However sometimes the next page has a few images. Therefore I don't want the next page to load until all the images / included CSS has…
0
votes
1 answer

without TransitionGroup component, demo dosen't work

I use react-transition-group in my project. The whole project works well so far,but there is something confused me. The animation of the project dosen't work without TransitionGroup. ReactDOM.render(
TMD
  • 185
  • 2
  • 13
0
votes
1 answer

react-transition-group transition initial render without props/state

I'm currently implementing a Modal component within my app, using Portals. What I'm trying to achieve is that when the Modal component is rendered, it should fade in and when it's no longer rendered it should fade out. Looking at the…
Myles
  • 916
  • 2
  • 9
  • 29
0
votes
1 answer

React transition group (v1) not activating transitions on rerender

I have a short quiz app and am trying to apply some animations to it. My idea is that only one question will be displayed at a time, with transitions between each one. I used create-react-app as boilerplate, and I'm using react-transitions-group v1…
bkula
  • 411
  • 2
  • 7
  • 20
0
votes
2 answers

ReactCSSTransitionGroup unique key error

I hope somebody could shed some light into this issue. After many attempts, I was able to import ReactCSSTransitionGroup into my react app correctly. Now I'm getting the following warning and my transition is not working. Warning: Each child in an…
0
votes
1 answer

React.Js TransitionGroup ( react-transition-group ) is not working

I am trying to call the special lifecycle hooks from react-transition-group to implement animation using gsap. But TransitionGroup component is blocking the Box component from rendering, If I remove the TransitionGroup component from the page…
Achyut Kr Deka
  • 639
  • 1
  • 7
  • 18
0
votes
0 answers

how to make a smooth appearance of the component and its disappearance in reactJS?

I use react + redux, I make a request to the server and while waiting for a response from the server the component is not displayed, the value of isFetching = false. As soon as the answer is received, the value isFetching = ture if…
Drop
  • 1,235
  • 1
  • 13
  • 20
0
votes
1 answer

componentWillAppear and componentWilEnter never fires

I don't understand why my componentWillAppear, componentWillEnter and componentWillLeave from my src/AnimatedWrapper never fires? It seems only the componentDidMount of that file fires. How do I get the other lifecycle events to fire? Here's what…
John
  • 28,573
  • 67
  • 217
  • 373
0
votes
1 answer

React Transition Group

I have been reading about React Transition Group. 95% of the material talks about CSSTransitionGroup. My understanding is that CSSTransitionGroup just builds off of TransitionGroup which simply provides callback methods that correspond to various…
Alex Bollbach
  • 3,730
  • 2
  • 25
  • 61
0
votes
0 answers

React Transition Group v2 with React Router v4

Hey everybody been trying to get this to work for hours and hours. I'm trying to do a basic fade in / fade out on route changes. I'm using react router v4 and react transition group v2. I've read tons of other questions on here and I can get the…
0
votes
1 answer

How to slide down a stateless component in React JS using ReactCSStransitionGroup or ReactTransitionGroup?

I want to slide a stateless component, which will be initially set to display:none, to be visible after state change in one of its parent component, as if it is slide down just like a dropdown. I am new to animation part, I was trying out…
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
  • 1,812
  • 1
  • 20
  • 44
-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
  • 316
  • 3
  • 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
18
19