我有一个这样的div,我需要在div上为其设置动画(添加类“ flip animation”)
<div className="ui card" onClick={this.reverse}>
<h1 className="ui header text-center">{this.get_word()}</h1>
</div>
什么是最好的方法?
先谢谢您
答案 0 :(得分: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将应用“您的动画类”(我相信是动画动画)类。
希望这会有所帮助!