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

最新推荐文章于 2022-05-24 13:59:14 发布

Qssn丶

最新推荐文章于 2022-05-24 13:59:14 发布

阅读量3.8k

点赞数

分类专栏：个人笔记 css javascript 文章标签： css动画 js控制css中的帧动画

本文链接：https://blog.csdn.net/dKnightL/article/details/79926398

版权

个人同时被 3 个专栏收录

77 篇文章 0 订阅

订阅专栏

笔记

43 篇文章 0 订阅

订阅专栏

javascript

20 篇文章 0 订阅

订阅专栏

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

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