Question

昨天我问了一个问题（original question），这个问题得到了及时的回答，但即使找到了解决方案，我也不明白为什么会这样。我可以复制这个解决方案以解决我需要做的其他事情，但在继续之前，我想了解为什么它的工作方式如此。

所以基本上我做了三个相互调用的函数。第一个叫第二个＆＃34; animationend＆＃34;第二个叫做第三个动画片＆＃34;最后第三个函数调用了第一个重新开始循环 - 但我的原始代码虽然缺乏;

document.getElementById("rightBoxTwo").style.animation = "none";

这是第三个函数调用第一个函数所需的顺序，所以循环重新开始。如果每个函数中没有上述代码，则三个函数只能运行一次然后停止。 StackOverFlow用户的答案; ScientiaEtVeritas给了我一个CodePen，其中有一个我需要的工作示例和一个简短的解释

所以，我认为你有几个选择：可行的是你重置函数rightBox中runTwo的动画 animation: none。如果您将scrollTextTwo 10s分配回 rightBox它应该重新开始。相当于其他的。

所以最后我的问题是为什么需要清除动画，为什么.style.animation = "none";会完成这个？

下面的

是提交解决方案后的工作代码......

<body onload="runOne()">

function runOne() {
  var x = document.getElementById("rightBox");
  x.addEventListener("animationend",runTwo);
  document.getElementById("rightBox").style.animation = "scrollTextTwo 10s";
  document.getElementById("rightBoxTwo").style.animation = "none";
}
function runTwo() {
  var x = document.getElementById("rightBoxTwo");
  x.addEventListener("animationend",runThree);
  document.getElementById("rightBoxTwo").style.animation = 
    "scrollTextTwo 10s";
  document.getElementById("rightBoxThree").style.animation = "none";
}
function runThree() {
  var x = document.getElementById("rightBoxThree");
  x.addEventListener("animationend",runOne);
  document.getElementById("rightBoxThree").style.animation = 
    "scrollTextTwo 10s";
  document.getElementById("rightBox").style.animation = "none";
}

Answer 1

最简单的原因是因为像for循环一样以同步方式将动画设置为相同的两次（或更多次）与执行一次相同：

let box = document.getElementById('box');

// animation happens once
for (let i = 0; i < 5; i++) {
  box.style.animation = 'fade .5s';
}

@keyframes fade {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
#box {
  height: 200px;
  width: 200px;
  margin: 50px;
  background: #018bbc;
}

<div id="box"></div>

即使您延迟动画，所以每次在可能的渲染之后运行动画时，行为都是相同的：

let box = document.getElementById('box');

// animation still happens once
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    box.style.animation = 'fade .5s';
  }, i * 1000);
}

@keyframes fade {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
#box {
  height: 200px;
  width: 200px;
  margin: 50px;
  background: #018bbc;
}

<div id="box"></div>

但如果我在每一步之前重置动画，引擎必须重新设置动画，这在某种程度上意味着“再次安装动画”，这意味着它将再次被动画化：

let box = document.getElementById('box');

box.addEventListener('animationend', function() {
  box.style.animation = 'none';
});

// animation now happens every time
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    box.style.animation = 'fade .5s';
  }, i * 1000);
}

@keyframes fade {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
#box {
  height: 200px;
  width: 200px;
  margin: 50px;
  background: #018bbc;
}

<div id="box"></div>

Answer 2

你真的不需要javascript这样的东西。通过关键帧，您可以按完成百分比定义样式。使用它可以为2个动画计时以获得类似的结果：

＆＃13;

@keyframes progress {
  0% { width: 0px;}
  50% { width: 600px;}
  100% {width: 600px;}
}
@keyframes progress2 {
  0% { width: 600px;}
  49% { width:600px;}
  50% { width: 0px;}
  100% {width: 600px;}
}
div {
  width:600px;
  height:50px;
  background-color:black;
}
#rightBox {
  animation: progress 4s infinite;
}
#rightBoxTwo {
  animation: progress2 4s infinite;
}

＆＃13;

<div id="rightBox"></div>
<div id="rightBoxTwo"></div>

＆＃13;

为什么我们需要在JavaScript中多次运行时清除动画？

2 个答案: