js控制css中的帧动画，使动画每点击一次运行一次

最新推荐文章于 2022-02-25 17:01:52 发布

原创最新推荐文章于 2022-02-25 17:01:52 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css动画 #js控制css中的帧动画

个人同时被 3 个专栏收录

77 篇文章

订阅专栏

笔记

43 篇文章

订阅专栏

javascript

20 篇文章

订阅专栏

本文介绍了一种解决React应用中右侧栏动画仅触发一次的问题。通过动态添加CSS类实现每次打开侧边栏时都能正常播放动画效果。文章提供了具体的CSS动画及JS代码示例。

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

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

.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
<div className={popClassNames} >
	//...省略其他代码
</div>