个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:30:07 25 4
gpt4 key购买 nike

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

所以基本上我做了三个相互调用的函数。第一个在“animationend”上调用第二个，第二个在“animationend”上调用第三个，最后第三个函数调用第一个函数重新开始循环——但我的原始代码虽然缺少； 

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

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

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.

所以最后我的问题是为什么需要清除动画，为什么 .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";
}

最佳答案

最简单的原因是因为像 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>

关于javascript - 为什么我们在JavaScript中多次运行时需要清除动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38794795/

25 4 0
文章推荐： javascript - 为什么这个 javascript 函数停止工作？
文章推荐： javascript - Amazon S3 - 上传图像的 URL 下载图像而不是在浏览器中显示
文章推荐： javascript - jQuery - 获取元素的单个计数
文章推荐： javascript - 在 Datatable 上格式化数据以 html 返回数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com