如何在onclick上设置react.js组件的动画并检测动画的结束

React使用合成事件,其中包括动画事件.文档在这里找到:https://reactjs.org/docs/events.html#animation-events.我更新了以下接受的答案:

class ClickMe extends React.Component {
  state = {fade: false};

  render () {
    const {fade} = this.state;

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

点击后,您可以更新状态,添加课程并记录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>
    )
  }
}

请参阅jsfiddle:https://jsfiddle.net/9eqpfv0k/1/