How to make an animation work with ReactCSSTransitionGroup?

Question

I am trying to implement the "bounce" animation from animate.css into a React component.

So far the CSS I have is:

// Animation Bounce

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}


// Classes for ReactCSSTransitionGroup

.example-enter {
  opacity: 0.01;
  color: green;
}

.example-enter.example-enter-active {
  opacity: 1;
  color: red;
  animation: bounce 5000ms ease-in;
}

.example-leave {
  opacity: 1;
  color: purple;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  color: cyan;
  animation: bounce 3000ms ease-in;
}

And my React code is:

<ReactCSSTransitionGroup
                transitionName="example"
                transitionEnterTimeout={5000}
                transitionLeaveTimeout={3000}>
                  <span key={key}>
                      { item }
                  </span>
    </ReactCSSTransitionGroup>

So far it doesn't really work, it does make the text red but that's about it. I can't make "bounce" work.

Thanks for help.

anuj kosambi · Accepted Answer · 2016-12-03T00:38:16.367

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

class Container extends React.Component {

  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  render(){
    return (
      <div className='container'>
        <CSSTransitionGroup 
        transitionName="example"
        transitionEnterTimeout={500} transitionLeaveTimeout={500}
      >
        {this.state.show && <div className='box' key={'box'}></div>}
        </CSSTransitionGroup>
        <button onClick={this.handleClick.bind(this)}>Click Me!</button>
      </div>
    )
  }

  handleClick(e){
  console.log(this.state.show);
    this.setState({
      show: !this.state.show
    });
  }
}

React.render(<Container />, document.getElementById('container'));

.container {
    text-align: center;
}

button {
    position: absolute;
    top: 50px;
    right: 43%;
}

.box {
    width: 50px;
    height: 50px;
    border: 1px solid;
    background-color: green;
}

// Animation Bounce
@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

// Classes for ReactCSSTransitionGroup 
.example-enter {
    opacity: 0;
    background-color: red;
}

.example-enter-active {
    background-color: green;
    opacity: 1;
    animation: bounce 500ms ease-in;
    transition: all .5s ease-in;
}

.example-leave {
    opacity: 1;
    background-color: purple;
}

.example-leave.example-leave-active {
    opacity: 0.1;
    background-color: cyan;
    transition: all .5s ease-out;
    animation: bounce 500ms ease-in;
}

ReactCssTransitionGroup works on item insertion/mount and removal/unmount...

Visit https://jsfiddle.net/7czwpmdL/

This actually helped me getting what I needed done. Thank you very much. — Madison, Dec 03 '16 at 19:35

How to make an animation work with ReactCSSTransitionGroup?

1 Answers1