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

Posted 2023-03-06

技术标签:

【中文标题】1个元素JS，CSS的多个动画[关闭]【英文标题】：Multiple animations for 1 element JS, CSS [closed] 【发布时间】：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>

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于1个元素JS，CSS的多个动画[关闭]的主要内容，如果未能解决你的问题，请参考以下文章

css如何不改变原位置的使多个图片在原地动画

如何在 js 中的单击事件上添加多个时间动画 css 类？