Getting ReactCSSTransitionGroup to work for a fade in transition with React.js
12,205
Your code does work, see JSFiddle. I've enlarged the transition duration of .example-appear
and changed the transition of .example-enter
which you can see after clicking any links.
Note that .example-appear
, which is triggered in componentDidMount()
, has effects on the first rendering of mounted component ; .example-enter
on the other hand has effects on newly rendered children components.
Author by
user1072337
Updated on June 28, 2022Comments
-
user1072337 almost 2 years
I have a simple landing page that I want to add a transition effect to. I am using React for my view rendering. I want to have a button fade in and out based on certain states:
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}> <div className="button-row"> <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a> </div> </ReactCSSTransitionGroup>
CSS:
.example-enter { opacity: 0.01; transition: opacity .5s ease-in; } .example-enter.example-enter-active { opacity: 1; } .example-leave { opacity: 1; transition: opacity .5s ease-in; } .example-leave.example-leave-active { opacity: 0.01; } .example-appear { opacity: 0.01; transition: opacity .5s ease-in; } .example-appear.example-appear-active { opacity: 1; }
However, when I run this, the transition does not work. Is there something I'm missing? Thank you!