为什么在JavaScript中运行它多次时需要清除动画？ [英] Why do we need to clear the animation when running it multiple times in JavaScript?
问题描述
昨天我提出了一个问题（原始问题），迅速回答，但即使找到一个解决方案，我不明白为什么这是工作的方式。我可以复制这个解决方案，我需要做的其他事情，但在我继续之前，我想知道为什么这样的工作方式。
所以基本上我做了三相互调用的函数。第一次调用第二次animationend，第二次调用第三次调用animationend，最后第三个函数调用第一个函数来重新启动循环 - 但我的原始代码虽然缺乏;
document.getElementById（rightBoxTwo）。style.animation =none;
这是第三个函数调用第一个函数所必需的，因此循环重新开始。没有上述代码在每个函数中，三个函数只工作一次，然后停止。答案是StackOverFlow的用户; ScientiaEtVeritas 为我提供了 CodePen ，它有我需要的工作示例和简要说明
几个选项：什么可以工作是你
重置rightBox在函数runTwob $ banimation：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，run3）;
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;
}
动画到同一事件两次（或更多次）是一样的：
let box = document.getElementById（'box'）; //动画发生一次（让i = 0; i <5; i ++）{box.style.animation ='fade .5s';} / code>
@keyframes fade {from {opacity：1} to {opacity ：0}}＃box {height：200px; width：200px; margin：50px;背景：＃018bbc;}
< div id = box>< / div>
let box = document.getElementById（'box'）; //动画仍然发生一次（让i = 0; i <5; i ++）{setTimeout（function（）{box.style.animation ='fade .5s ';}，i * 1000）;}
@keyframes fade {from {opacity：1}到{opacity：0}}＃box {height：200px; width：200px; margin：50px;背景：＃018bbc;}
< div id = < / div>< / div>< / p>
如果我在每个步骤之前重置动画，引擎必须重新设置动画，这在某种程度上意味着再次安装动画，意味着它将再次动画：
let box = document.getElementById（'box'）; box.addEventListener（'animationend'，function ）{box.style.animation ='none';}）; //动画现在每次都会发生（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;背景：＃018bbc;}
< div id = box>< / div>
Yesterday I asked a question (original question) that was promptly answered, but even though a solution was found, I don't understand why this is working the way it is. I can duplicate this solution for other things I need to do but before I continue on I would like to understand why this works the way it does.
So basically I made three functions that called each other. The 1st called the second upon "animationend" and the second called the third upon an "animationend" and the finally the third function called the first to start the cycle all over again - BUT My original code though lacked;
document.getElementById("rightBoxTwo").style.animation = "none";
which was needed in-order for the third function to call the first so the cycle starts all over again. Without the above code in each function the three functions would work only once and then stop. The answer that StackOverFlow user; ScientiaEtVeritas gave me included a CodePen which had a working example of what I needed and a brief explanation
So, I think you have several options: What could work is that you
reset the the animation of rightBox in function runTwo with
animation: none. If you assign scrollTextTwo 10s back to the
rightBox it should start again. Equivalent for the other ones.
So finally my question is WHY does the animation need to be cleared, and why does the .style.animation = "none"; accomplish this?
below is the working code after a solution was presented...
<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";
}
解决方案 The simplest reason is because setting the animation to the same thing twice (or more times) is the same as doing it once:
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>
The behavior is the same even if you delay the animation so each time it runs after a possible render:
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>
But if I reset the animation before each step, the engine has to re-set the animation, which in a way means to "install the animation again", meaning it will be animated again:
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>
这篇关于为什么在JavaScript中运行它多次时需要清除动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
