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

React- fade in and fade out

I am new to react - I'm sure this is a simple problem but I am having a lot of trouble figuring out a solution. So I have two buttons. Onclick on first button it should open fade in and if i click on the same button(button1) or if I click on the…
contact dummy
  • 571
  • 9
  • 25
0
votes
1 answer

Transitions are firing too early when using _app.js page component in Next.JS 6

I am trying to set up a relatively simple page transition within Next JS. I am using GSAP TweenLite as my animation library, and I am react-transition-group to handle the transitions, and I am trying to do all of this in the _app.js component that…
Brandon Creek
  • 43
  • 6
0
votes
0 answers

Animating width by CSSTransition does not resize adjacent element

I am trying to animate buttons in such manner that when you click on the button,the next button will be gradually disappearing.The problem is that the button which being clicked does not update its width dynamically,it does so when transitions…
Jan Ciołek
  • 1,796
  • 3
  • 17
  • 32
0
votes
1 answer

Single child route not animating properly

I'm using React router for a project. I would like to animate a single route, which lives inside a parent route (basically, a single project will appear as a "modal" on top of the list of projects, so the content of the parent route need to persist…
Marcos Mellado
  • 125
  • 2
  • 11
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…
rfranklin
  • 1
  • 2
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
  • 315
  • 3
  • 14
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
  • 926
  • 2
  • 12
  • 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
  • 541
  • 3
  • 10
  • 22
0
votes
2 answers

Getting warning about unique "key" when trying to import ReactCSSTransitionGroup into react app

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…
Micposso
  • 43
  • 4
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
  • 739
  • 1
  • 8
  • 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,394
  • 3
  • 15
  • 25
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
  • 32,403
  • 80
  • 251
  • 422
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
  • 4,370
  • 9
  • 32
  • 80
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…
MrBalloons
  • 15
  • 5
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…
SsNewbie
  • 257
  • 2
  • 8
  • 21
1 2 3
…
22
23