我希望当用户单击 DOM 元素时翻转一个 React 组件。我看到一些关于他们的动画混合的文档,但它看起来是为“进入”和“离开”事件设置的。响应某些用户输入并在动画开始和完成时收到通知的最佳方法是什么?目前我有一个列表项,我希望它翻转并显示一些按钮,例如删除、编辑、保存。也许我错过了文档中的某些内容。
动画混合
最佳答案
点击后,您可以更新状态、添加类并记录 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事件。
关于javascript - 如何为react.js组件onclick设置动画并检测动画的结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24111813/