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>