Getting ReactCSSTransitionGroup to work in fade mode with React.js
I have a simple landing page that I want to add a transition effect to. I am using React to render my view. I want the button to hover and exit 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 doesn't work. Is there something I am missing? Thank!
source to share
Your code actually works, see the JSFiddle . I increased the duration of the transition .example-appear
and changed the transition .example-enter
that you can see after clicking on any links.
Note that .example-appear
which starts in componentDidMount()
has an effect on the first render of the mounted component; .example-enter
on the other hand, affects newly created child components.
source to share