1个元素JS，CSS的多个动画[关闭]答案

【问题标题】：Multiple animations for 1 element JS, CSS [closed]1个元素JS，CSS的多个动画[关闭]
【发布时间】：2018-04-04 20:55:59
【问题描述】：

我正在尝试为我正在制作的辅导网站制作 Quicksort 动画。我正在使用带有事件侦听器的关键帧动画来为每个元素背靠背地触发动画。问题是我的 object2 在第二个动画之后不会停留在结束位置。当我在完全不同的元素上调用动画时，当我没有在其上添加第三个动画时，它会无缘无故地执行它的第一个动画。

当我为对象 8 设置动画时，函数 7 会出现问题。

问题是对象 2 在第二个动画结束后不会停留在它结束的位置。当我为对象 8 设置动画时，到目前为止的最后一个动画...... object2 执行它的第一个动画，即使我没有告诉它做任何事情，只是希望它留在原处。

object1 = document.getElementById("object1");
object2 = document.getElementById("object2");
object3 = document.getElementById("object3");
object4 = document.getElementById("object4");
object5 = document.getElementById("object5");
object6 = document.getElementById("object6");
object7 = document.getElementById("object7");
object8 = document.getElementById("object8");
object9 = document.getElementById("object9");
object10 = document.getElementById("object10");

function function1() {
  object5.style.animation = "animation1 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function2);
}

function function2() {
  object2.style.animation = "animation2 2s ease 1 normal running 0s forwards";
  object2.addEventListener("animationend", function3);
}

function function3() {
  object5.style.animation = "animation3 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function4);
}

function function4() {

  object10.style.animation = "animation4 2s ease 1 normal running 0s forwards";
  object10.addEventListener("animationend", function5);
}

function function5() {
  object2.style.animation = "animation5 2s ease 1 normal running 0s forwards";
  object2.addEventListener("animationend", function6);
}

function function6() {
  object5.style.animation = "animation6 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function7);
}

function function7() {
  object8.style.animation = "animation7 2s ease 1 normal running 0s forwards";
  object8.addEventListener("animationend", function8);
}

function function8() {
  object5.style.animation = "animation8 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function9);
}

function function9() {
  object4.style.animation = "animation9 2s ease 1 normal running 0s forwards";

}

#object1 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: blue;
  float: left;
}

#object2 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: green;
  float: left;
  animation-iteration-count: 2;
}

#object3 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: red;
  float: left;
}

#object4 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: purple;
  float: left;
}

#object5 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: orange;
  float: left;
}

#object6 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: brown;
  float: left;
}

#object7 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: pink;
  float: left;
}

#object8 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: tomato;
  float: left;
}

#object9 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: indigo;
  float: left;
}

#object10 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: mediumspringgreen;
  float: left;
}

#vacuum {
  height: 200px;
}

#vacuum2 {
  height: 1000px;
  width: 100px;
  float: left;
}

button {
  height: 50px;
  width: 65px;
  background-color: crimson;
  color: white;
  border-radius: 2px;
  margin-left: 60px;
}

@keyframes animation1 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(-70px) translateX(0px);
  }
  66% {
    transform: translateY(-70px) translateX(-200px);
  }
  100% {
    transform: translateY(-70px) translateX(-150px);
  }
}

@keyframes animation2 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation3 {
  0% {
    transform: translateY(-70px) translateX(-150px);
  }
  100% {
    transform: translateY(-70px) translateX(250px);
  }
}

@keyframes animation4 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(70px) translateX(0px);
  }
  66% {
    transform: translateY(70px) translateX(-400px);
  }
  100% {
    transform: translateY(0px) translateX(-400px);
  }
}

@keyframes animation5 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(400px);
  }
  100% {
    transform: translateY(0px) translateX(400px);
  }
}

@keyframes animation6 {
  0% {
    transform: translateY(-70px) translateX(250px);
  }
  50% {
    transform: translateY(-70px) translateX(200px);
  }
  100% {
    transform: translateY(-70px) translateX(150px);
  }
}

@keyframes animation7 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation8 {
  0% {
    transform: translateY(-70px) translateX(-200px);
  }
  50% {
    transform: translateY(-70px) translateX(-150px);
  }
  100% {
    transform: translateY(-70px) translateX(-100px);
  }
}

@keyframes animation9 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation10 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(-250px);
  }
  100% {
    transform: translateY(0px) translateX(-250px);
  }
}

@keyframes animation11 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(250px);
  }
  100% {
    transform: translateY(0px) translateX(250px);
  }
}

<div id="vacuum"></div>
<div id="vacuum2"></div>
<div id="object1"></div>
<div id="object2"></div>
<div id="object3"></div>
<div id="object4"></div>
<div id="object5"></div>
<div id="object6"></div>
<div id="object7"></div>
<div id="object8"></div>
<div id="object9"></div>
<div id="object10"></div>
<button onclick="function1()">Click Mom :)</button>

【问题讨论】：

标签： javascript css animation

【解决方案1】：

问题

这个问题是由多个 eventListener 附加到同一个对象引起的。具体来说：

function2 在 object2 上启动动画并将 animationend 侦听器附加到 object2
function5 在object2 上启动一个动画并将animationend 侦听器附加到object2（object2 上的第二个事件侦听器）
当function5() 中的动画完成时，来自function2 和function5 的事件监听器都会被调用
来自function2 和function5 中的事件侦听器的回调函数会触发新的animationend 事件，从而导致调用function3 和function6。
这会导致多个动画序列开始，然后相乘

我在下面的演示中添加了一些 console.logs 以帮助将其可视化。

object1 = document.getElementById("object1");
object2 = document.getElementById("object2");
object3 = document.getElementById("object3");
object4 = document.getElementById("object4");
object5 = document.getElementById("object5");
object6 = document.getElementById("object6");
object7 = document.getElementById("object7");
object8 = document.getElementById("object8");
object9 = document.getElementById("object9");
object10 = document.getElementById("object10");

function function1() {
  console.log('animation 1 - start')
  object5.style.animation = "animation1 2s ease 0s 1 normal forwards running";
  object5.addEventListener("animationend", function() {
    console.log('animation 1 - end')
    function2()
  });
}

function function2() {
  console.log('animation 2 - start')
  object2.style.animation = "animation2 2s ease 0s 1 normal forwards running";
  object2.addEventListener("animationend", function() {
    console.log('animation 2 - end')
    function3()
  });
}

function function3() {
  console.log('animation 3 - start')
  object5.style.animation = "animation3 2s ease 0s 1 normal forwards running";
  object5.addEventListener("animationend", function() {
    console.log('animation 3 - end')
    function4()
  });
}

function function4() {
  console.log('animation 4 - start')
  object10.style.animation = "animation4 2s ease 0s 1 normal forwards running";
  object10.addEventListener("animationend", function() {
    console.log('animation 4 - end')
    function5()
  });
}

function function5() {
  console.log('animation 5 - start')
  object2.style.animation = "animation5 2s ease 0s 1 normal forwards running";
  object2.addEventListener("animationend", function() {
    console.log('animation 5 - end')
    function6()
  });
}

function function6() {
  console.log('animation 6 - start')
  object5.style.animation = "animation6 2s ease 0s 1 normal forwards running";
  object5.addEventListener("animationend", function() {
    console.log('animation 6 - end')
    function7()
  });
}

function function7() {
  console.log('animation 7 - start')
  object8.style.animation = "animation7 2s ease 0s 1 normal forwards running";
  object8.addEventListener("animationend", function() {
    console.log('animation 7 - end')
    function8()
  });
}

function function8() {
  console.log('animation 8 - start')
  object5.style.animation = "animation8 2s ease 0s 1 normal forwards running";
  object5.addEventListener("animationend", function() {
    console.log('animation 8 - end')
    function9()
  });
}

function function9() {
  object4.style.animation = "animation9 2s ease 0s 1 normal forwards running";

}

#object1 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: blue;
  float: left;
}

#object2 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: green;
  float: left;
  animation-iteration-count: 2;
}

#object3 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: red;
  float: left;
}

#object4 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: purple;
  float: left;
}

#object5 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: orange;
  float: left;
}

#object6 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: brown;
  float: left;
}

#object7 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: pink;
  float: left;
}

#object8 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: tomato;
  float: left;
}

#object9 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: indigo;
  float: left;
}

#object10 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: mediumspringgreen;
  float: left;
}

#vacuum {
  height: 200px;
}

#vacuum2 {
  height: 1000px;
  width: 100px;
  float: left;
}

button {
  height: 50px;
  width: 65px;
  background-color: crimson;
  color: white;
  border-radius: 2px;
  margin-left: 60px;
}

@keyframes animation1 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(-70px) translateX(0px);
  }
  66% {
    transform: translateY(-70px) translateX(-200px);
  }
  100% {
    transform: translateY(-70px) translateX(-150px);
  }
}

@keyframes animation2 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation3 {
  0% {
    transform: translateY(-70px) translateX(-150px);
  }
  100% {
    transform: translateY(-70px) translateX(250px);
  }
}

@keyframes animation4 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(70px) translateX(0px);
  }
  66% {
    transform: translateY(70px) translateX(-400px);
  }
  100% {
    transform: translateY(0px) translateX(-400px);
  }
}

@keyframes animation5 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(400px);
  }
  100% {
    transform: translateY(0px) translateX(400px);
  }
}

@keyframes animation6 {
  0% {
    transform: translateY(-70px) translateX(250px);
  }
  50% {
    transform: translateY(-70px) translateX(200px);
  }
  100% {
    transform: translateY(-70px) translateX(150px);
  }
}

@keyframes animation7 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation8 {
  0% {
    transform: translateY(-70px) translateX(-200px);
  }
  50% {
    transform: translateY(-70px) translateX(-150px);
  }
  100% {
    transform: translateY(-70px) translateX(-100px);
  }
}

@keyframes animation9 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation10 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(-250px);
  }
  100% {
    transform: translateY(0px) translateX(-250px);
  }
}

@keyframes animation11 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(250px);
  }
  100% {
    transform: translateY(0px) translateX(250px);
  }
}

<div id="vacuum"></div>
<div id="vacuum2"></div>
<div id="object1"></div>
<div id="object2"></div>
<div id="object3"></div>
<div id="object4"></div>
<div id="object5"></div>
<div id="object6"></div>
<div id="object7"></div>
<div id="object8"></div>
<div id="object9"></div>
<div id="object10"></div>
<button onclick="function1()">Click Mom :)</button>

解决方案

解决办法是从对象中去removeEventListeners，防止后面的animationend事件发生时调用前面的函数。

例如，要从object5 中删除function2 事件侦听器：

function function2() {
  object5.removeEventListener('animationend', function2);
  object2.style.animation = "animation2 2s ease 0s 1 normal forwards running";
  object2.addEventListener("animationend", function3);
}

或者，如果您想更通用，可以使用event.target.removeEventListener(event.type, arguments.callee) 格式，例如：

function function2(event) {
  event.target.removeEventListener(event.type, arguments.callee);
  object2.style.animation = "animation2 2s ease 0s 1 normal forwards running";
  object2.addEventListener("animationend", function3);
}

这是有效的解决方案：

object1 = document.getElementById("object1");
object2 = document.getElementById("object2");
object3 = document.getElementById("object3");
object4 = document.getElementById("object4");
object5 = document.getElementById("object5");
object6 = document.getElementById("object6");
object7 = document.getElementById("object7");
object8 = document.getElementById("object8");
object9 = document.getElementById("object9");
object10 = document.getElementById("object10");

function function1() {
  object5.style.animation = "animation1 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function2);
}

function function2(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object2.style.animation = "animation2 2s ease 1 normal running 0s forwards";
  object2.addEventListener("animationend", function3);
}

function function3(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object5.style.animation = "animation3 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function4);
}

function function4(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object10.style.animation = "animation4 2s ease 1 normal running 0s forwards";
  object10.addEventListener("animationend", function5);
}

function function5(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object2.style.animation = "animation5 2s ease 1 normal running 0s forwards";
  object2.addEventListener("animationend", function6);
}

function function6(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object5.style.animation = "animation6 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function7);
}

function function7(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object8.style.animation = "animation7 2s ease 1 normal running 0s forwards";
  object8.addEventListener("animationend", function8);
}

function function8(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object5.style.animation = "animation8 2s ease 1 normal running 0s forwards";
  object5.addEventListener("animationend", function9);
}

function function9(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  object4.style.animation = "animation9 2s ease 1 normal running 0s forwards";

}

#object1 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: blue;
  float: left;
}

#object2 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: green;
  float: left;
  animation-iteration-count: 2;
}

#object3 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: red;
  float: left;
}

#object4 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: purple;
  float: left;
}

#object5 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: orange;
  float: left;
}

#object6 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: brown;
  float: left;
}

#object7 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: pink;
  float: left;
}

#object8 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: tomato;
  float: left;
}

#object9 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: indigo;
  float: left;
}

#object10 {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: mediumspringgreen;
  float: left;
}

#vacuum {
  height: 200px;
}

#vacuum2 {
  height: 1000px;
  width: 100px;
  float: left;
}

button {
  height: 50px;
  width: 65px;
  background-color: crimson;
  color: white;
  border-radius: 2px;
  margin-left: 60px;
}

@keyframes animation1 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(-70px) translateX(0px);
  }
  66% {
    transform: translateY(-70px) translateX(-200px);
  }
  100% {
    transform: translateY(-70px) translateX(-150px);
  }
}

@keyframes animation2 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation3 {
  0% {
    transform: translateY(-70px) translateX(-150px);
  }
  100% {
    transform: translateY(-70px) translateX(250px);
  }
}

@keyframes animation4 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(70px) translateX(0px);
  }
  66% {
    transform: translateY(70px) translateX(-400px);
  }
  100% {
    transform: translateY(0px) translateX(-400px);
  }
}

@keyframes animation5 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(400px);
  }
  100% {
    transform: translateY(0px) translateX(400px);
  }
}

@keyframes animation6 {
  0% {
    transform: translateY(-70px) translateX(250px);
  }
  50% {
    transform: translateY(-70px) translateX(200px);
  }
  100% {
    transform: translateY(-70px) translateX(150px);
  }
}

@keyframes animation7 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation8 {
  0% {
    transform: translateY(-70px) translateX(-200px);
  }
  50% {
    transform: translateY(-70px) translateX(-150px);
  }
  100% {
    transform: translateY(-70px) translateX(-100px);
  }
}

@keyframes animation9 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  100% {
    transform: translateY(70px) translateX(0px);
  }
}

@keyframes animation10 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(-250px);
  }
  100% {
    transform: translateY(0px) translateX(-250px);
  }
}

@keyframes animation11 {
  0% {
    transform: translateY(70px) translateX(0px);
  }
  50% {
    transform: translateY(70px) translateX(250px);
  }
  100% {
    transform: translateY(0px) translateX(250px);
  }
}

<div id="vacuum"></div>
<div id="vacuum2"></div>
<div id="object1"></div>
<div id="object2"></div>
<div id="object3"></div>
<div id="object4"></div>
<div id="object5"></div>
<div id="object6"></div>
<div id="object7"></div>
<div id="object8"></div>
<div id="object9"></div>
<div id="object10"></div>
<button onclick="function1()">Click Mom :)</button>

【讨论】：