如何在onclick上设置react.js组件的动画并检测动画的结束 [英] How can I animate a react.js component onclick and detect the end of the animation

问题描述

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

I want to have a react component flip over when a user clicks on the DOM element. I see some documentation about their animation mixin but it looks to be set up for "enter" and "leave" events. What is the best way to do this in response to some user input and be notified when the animation starts and completes? Currently I have a list item and I want it to flip over an show a few buttons like delete, edit, save. Perhaps I missed something in the docs.

动画mixin

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

推荐答案

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

Upon clicks you can update the state, add a class and record the animationend event.

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

编辑：已更新以反映当前的React，它支持动画和事件。

Edit: Updated to reflect current React, which supports animationend events.

这篇关于如何在onclick上设置react.js组件的动画并检测动画的结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！