没有任何东西附加在 onAnimationEnd on React.

Question

我在 React 上使用 onAnimationEnd 时遇到问题。 我有一个覆盖div，我通过 4 个步骤(使用 setState(更改它的类：

1. 初始步骤：覆盖div 类 =显示无
2. 第 2 步：带有 onClick 事件的按钮显示带有类 =淡入的覆盖div
3. 第 3 步：使用 onClick 事件叠加的按钮将类更改为淡出
4. 步骤 4：覆盖div 上的 onAnimationEnd 事件应将类更改为displayNone

但是步骤4上什么也没发生，类保持淡出我做错了什么？

谢谢

代码在这里：

class Buttons extends React.Component{
constructor(props){
super(props)
this.buttons = ['Hello Overlay','Goodbye Overlay']
this.state = {
overlayClass : 'displayNone',
}
}

render(){
return(
<div>
<h1>Overlay fade-in fade-out</h1>
<button type='button' 
onClick={() => this.setState({ overlayClass : 'fade-in' })}>{this.buttons[0]}</button>
<div className={`overlay ${this.state.overlayClass}`}
onAnimationEnd={() => this.setState({ overlayClass : 'displayNone' })}>
<button type='button' 
onClick={() => this.setState({ overlayClass : 'fade-out' })}
>{this.buttons[1]}</button>
</div>
</div>
)}

}
ReactDOM.render(<Buttons />, document.body);

Answer 1

所以首先，在你提供的代码笔中，你使用的是一些古老版本的 React 和 ReactDOM - 由于某种原因，它无法与 onAnimationEnd 事件正常工作。使用最新版本的 React 它可以正常工作。

这是固定代码笔

请注意，在handleAnimationEnd方法中，我正在检查当前overlayClass是否fade-out，因为onAnimationEnd会触发每个动画，因此当您将overlayClass从fade-in更改为displayNone时，您将永远不会看到"再见叠加"按钮。