当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js控制css中的帧动画，使动画每点击一次运行一次（代码实例）

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

2019年02月25日  | 移动技术网IT编程  | 我要评论

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

\

解决思路是：动态添加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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网