单击时动画反应 animate.css

Question

我有这样一个div，我需要在点击div时对其进行动画处理（添加类“翻转动画”）

<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 为真，您的 div 将应用“your-animation-class”类（我相信翻转动画）。

希望这会有所帮助！