javascript - 如何为react.js组件onclick设置动画并检测动画的结束

Question

我希望当用户单击 DOM 元素时翻转一个 React 组件。我看到一些关于他们的动画混合的文档，但它看起来是为“进入”和“离开”事件设置的。响应某些用户输入并在动画开始和完成时收到通知的最佳方法是什么？目前我有一个列表项，我希望它翻转并显示一些按钮，例如删除、编辑、保存。也许我错过了文档中的某些内容。

动画混合

http://facebook.github.io/react/docs/animation.html

Answer 1

点击后，您可以更新状态、添加类并记录 animationend 事件。

class ClickMe extends React.Component {
  constructor(props) {
    super(props)
    this.state = { fade: false }
  }
  render() {
    const fade = this.state.fade

    return (
      <button
        ref='button'
        onClick={() => this.setState({ fade: true })}
        onAnimationEnd={() => this.setState({ fade: false })}
        className={fade ? 'fade' : ''}>
        Click me!
      </button>
    )
  }
}

查看 plnkr:https://next.plnkr.co/edit/gbt0W4SQhnZILlmQ?open=Hello.js&deferRun=1&preview

编辑:更新以反射(reflect)当前的React，它支持animationend事件。