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


版权声明:本文为dKnightL原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。