react如何实现点击暂停/继续动画?

Question

用css动起来很简单，不知道在react怎么控制暂停和继续，有没有简单些的方法，只用得到一个动画而已。

Answer 1

在 jsx 中利用 state 控制 css

<div className={this.state.paused ? 'blocked-circle':'circle'}></div>

同时，在 css 中增加一个 blocked-circle 类

Answer 2

<div class="circle" style={this.state.pause ? {animationPlayState:'paused'} : {}}>