1个元素JS，CSS

Question

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

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

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

＆＃13;

＆＃13;

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";

}

＆＃13;

#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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题

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

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

我已在下面的演示中添加了一些console.log来帮助可视化。

＆＃13;

＆＃13;

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";

}

＆＃13;

#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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

解决方案

解决方案是从对象removeEventListener开始，以防止在以后animationend事件发生时调用先前的函数。

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

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);
}

这是工作解决方案：

＆＃13;

＆＃13;

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";

}

＆＃13;

#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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;