脚本宝典收集整理的这篇文章主要介绍了js实例教程-js控制css中的帧动画，使动画每点击一次运行一次（代码实例），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 .moveAnimation{       animation:mymove 1s;       }      @keyframes mymove /*Safari and Chrome*/   {       From {right:-400px;}       to {right:0px;}   }  

 //根据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>  

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

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

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-js控制css中的帧动画，使动画每点击一次运行一次（代码实例）全部内容，希望文章能够帮你解决js实例教程-js控制css中的帧动画，使动画每点击一次运行一次（代码实例）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。