如何使用 ReactCSSTransitionGroup 制作动画？

Question

我正在尝试将 animate.css 的“反弹”动画实现到 React 组件中。

到目前为止，我拥有的 CSS 是：

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

我的 React 代码是：

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

到目前为止，它并没有真正起作用，它确实使文本变红，但仅此而已。我无法让“反弹”工作。

感谢您的帮助。

Answer 1

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 用于项目插入/挂载和移除/卸载...

访问https://jsfiddle.net/7czwpmdL/