What is wrong with ReactCSSTransitionGroup? - css

Question

I have this code inside render() function in my component:
..
<ReactCSSTransitionGroup
transitionName="testing"
transitionEnterTimeout={600}
transitionLeaveTimeout={600}>
<div>testing animations!</div>
</ReactCSSTransitionGroup>
..
And i have this code in my CSS file:
.testing-enter {
animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.testing-leave {
animation: slideOut 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#keyframes slideIn {
0% {
opacity 0
transform translate3d(-50px, 0, 0)
}
100% {
opacity 1
transform translate3d(0, 0, 0)
}
}
#keyframes slideOut {
0% {
opacity: 1
transform: translate3d(0, 0, 0)
}
100% {
opacity: 0
transform: translate3d(50px, 0, 0)
}
}
I just want my div block to slideIn from the right, but nothing happens! Could not find the wrong piece of code, it looks like everything is ok.

Answer 1

You have static content inside the <ReactCSSTransitionGroup/> tag. You need to have dynamic content. Let's say you need to render <div>testing animations!</div> upon mouse click. You need to assign the children to a variable and modify the variable upon mouse click.
let myDiv = buttonClicked ? <div>testing animations!</div> : <div></div>
<ReactCSSTransitionGroup
transitionName="testing"
transitionEnterTimeout={600}
transitionLeaveTimeout={600}>
{myDiv}
</ReactCSSTransitionGroup>
If no actions are performed and you simply need to animate it on initial mount, use transition-appear instead.
ReactCSSTransitionGroup provides the optional prop transitionAppear,
to add an extra transition phase at the initial mount of the
component. There is generally no transition phase at the initial mount
as the default value of transitionAppear is false. The following is an
example which passes the prop transitionAppear with the value true.
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
<div>testing animations!</div>
</ReactCSSTransitionGroup>
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}