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

Question

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

Answer 1

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

Answer 2

在 jsx 中利用 state 控制 css

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

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

Answer 3

AnimationPlayState这个属性很好用，但是ios上不兼容，哈，无语

            <div style={this.state.clickonthe ? {
                AnimationPlayState: 'running',
                WebkitAnimationPlayState: 'running',
            } : {
                    AnimationPlayState: 'paused',
                    WebkitAnimationPlayState: 'paused',

                }}>
            </div>