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

解决思路是:动态添加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版权协议,转载请附上原文出处链接和本声明。