js控制css中的帧动画，使动画每点击一次运行一次（代码实例）

今天在模拟右侧栏向左滑出时，发现动画只会起作用一次，最后解决了~如下图

解决思路是：动态添加class。

css

.moveanimation{  
    animation:mymove 1s;      
}  
  
@keyframes mymove /*safari and chrome*/  
{  
    from {right:-400px;}  
    to {right:0px;}  
}  

js（用的是react，动态添加class核心不变） 

//根据state动态改变clss   moveanimation      
let popclassnames=classnames({  
    [styles["pop-area"]]:true,  
    [styles["help-area"]]:!defaultprops.ispopup,  
    [styles["moveanimation"]]:this.state.isshow,              
})  
  
//...省略其他代码  
  
//引用class  
<p classname={popclassnames} >  
    //...省略其他代码  
</p>