Question

我有一个这样的div，我需要在div上为其设置动画（添加类“ flip animation”）

<div className="ui card" onClick={this.reverse}>
    <h1 className="ui header text-center">{this.get_word()}</h1>
</div>

什么是最好的方法？

先谢谢您

Answer 1

我不确定这是否是“最佳”方法，但这对我有用：

首先，在组件中添加一个状态，该状态将允许您跟踪是否必须对div设置动画：

class MyComponent extends Component {
  state = {
    isAnimated: false
  } ...

然后在组件内部创建一个函数，该函数将切换“ isAnimated”：

  // Arrow function for binding
  toggleAnimation = () => {
    this.setState({isAnimated: !this.state.isAnimated});
  }

然后，您可以将此函数添加到onClick事件中，并根据状态应用动画类：

<div 
className={`ui card ${this.state.isAnimated && "your-animation-class"}`} 
onClick={this.toggleAnimation}
>
    <h1 className="ui header text-center">{this.get_word()}</h1>
</div>

因此，当您单击div时，它将切换isAnimated;如果isAnimated为true，则您的div将应用“您的动画类”（我相信是动画动画）类。

希望这会有所帮助！

单击时进行动画处理animate.css

1 个答案: