animation 只触发一次的解决办法

最新推荐文章于 2025-05-28 16:06:45 发布

guanzhangl

最新推荐文章于 2025-05-28 16:06:45 发布

阅读量1.5w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web工作问题总结

本文链接：https://blog.youkuaiyun.com/guanzhangl/article/details/77973034

web工作问题总结专栏收录该内容

5 篇文章

订阅专栏

animation只触发一次解决办法。

通过js控制让animation等于空，删除animation样式。

document.getElementById("div").style.animation = "";

document.getElementById("div").style.animation = "mymove 2s";

注意点：

1.js是一条语句执行一次清空animation一定要在动画执行完之后执行清空语句和新的animation setTimeout()

2.如果是有判断条件的情况下，通过判断条件来执行清空语句 if() switch(){}

3.js操控的样式为行间样式，当animation不是添加在行间的时候，js操作无效。应当把animation添加在行间！否则会产生小bug （非常重要的一点必须这么做可清除小bug）

4.@keyframes 这个不需要放在行间可放在任何地方不影响任何动画效果

提醒：

使用animation 一定要通过时间轴仔细计算行为的准确时间节点

小技巧：

animation配合setInterval()使用的时候，setInterval() 执行时间和动画执行时间长短清空时把时间设置成0.000000000000000000001毫秒，这样边可以实现无缝切换。

例:不通过animation的次数来实现循环播放动画

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{width: 100px;
height: 100px;
background-color: red;
}

@keyframes mymove{
0%{width: 200px;}
100{width: 390px;}
}
</style>

<script type="text/javascript">
window.onload = function (){
setInterval(function move(){
document.getElementById("div1").style.animation = "";
setTimeout(function(){document.getElementById("div1").style.animation = "mymove 2s";},30);

},2000);

}
</script>
</head>
<body>
<div id="div1" style="animation: mymove 2s;">
</div>
</body>
</html>