What is wrong with ReactCSSTransitionGroup?

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.

score 2 · Accepted Answer · answered Aug 16 '16 at 02:31

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

What is wrong with ReactCSSTransitionGroup?

1 Answers1