How can react pause / resume animation?

AnimationPlayState: "paused" fails on ios, so I"m going to abandon it. I see a divine solution https://codepen.io/HaoyCn/pen., but I don"t know how to write it on react, ask for advice!

<div style={this.props.clickonthe ? {
    AnimationPlayState: "running",
    WebkitAnimationPlayState: "running",

} : {
        AnimationPlayState: "paused",
        WebkitAnimationPlayState: "paused",

    }}>

React.js css3 css javascript

Mar.01,2021

do you know state of react? Just operate it.

constructor(props) {
  super(props);
  this.state = {
    isPlay: false
  };
}

/**
* click function
*/
playFn(){
    this.setState({
        !this.state.isPlay
    })
}

render(){
    return(
        <div onClick={this.playFn} className={this.state.isPlay?"animation":"noAnimation"}></div>
    )
}

finally press this, which is OK.
https://jsfiddle.net/shy2850/.

Previous: Polling problems after calling selenium with Flask

Next: How to develop composer packages for the framework?