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

Question

当用户点击DOM元素时,我希望反应组件翻转.我看到一些关于他们的动画mixin的文档,但它看起来设置为"enter"和"leave"事件.响应某些用户输入的最佳方法是什么,并在动画开始和完成时收到通知？目前我有一个列表项,我希望它翻转显示一些按钮,如删除,编辑,保存.也许我在文档中遗漏了一些东西.

动画mixin

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

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

Answer 2

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

Answer 3

如何使用 Hooks 和 prevState 来做到这一点，以免更新事件处理程序内的状态。

 import { useState } from 'react'

export default function Animation() {
  const [fade, setFade] = useState(false)
  
  const triggerFade = () => {
    setFade(prevState => {
      return !prevState
    })
  }
  
  return (
    <div
      onAnimationEnd={triggerFade}
      className={fade ? 'fadedClass' : 'visibleClass'}
    >
      Watch me fade
    </div>
    <button onClick={triggerFade}>Click Me</button>
  )
}