Oner Ksor Oner Ksor - 3 months ago 71
React JSX Question

What is wrong with ReactCSSTransitionGroup?

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

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;
}
Comments