javascript - 如何向使用dom随机生成的元素添加事件监听器？

Question

我正在尝试更改使用关键帧在 css 中进行动画处理的移动 div 的方向，并且我希望能够单击它并更改其方向。这是我的代码的样子。

HTML

     <div id ="div1"></div> 

CSS

   #div1 {
   height:50px;
   width:50px;
   background:red;
   position:relative;
   animation: oldanimation 5s infinite alternate;
      }

   @keyframes newanimation { 
   0% {
   top:0px;
   left:0px;
   }

   100% {    
   top:300px;
   right:300px; 
    } 
   }

  @keyframes oldanimation{
  0% {
  top:0px;
  left:0px;
  transform:rotate(45deg);
      }
 100% {
 top:100px;
 left:400px;
 transform:rotate(-45deg);
    }
 }

Javascript

 div1 = document.getElementById('div1');
 div1.addEventListener('click', newfunc);

 function newfunc () {
 this.style.animationName = 'newanimation';
  }

方形 div 当前从左向右移动并稍微向下移动，默认情况下由关键帧“oldanimation”触发。因此，我决定创建一个标记为“newanimation”的新关键帧动画，并在单击正方形时触发。我希望广场能顺利地从旧路过渡到新路。目前它只是消失并遵循新的路径。有没有办法让过渡顺利？抱歉问了这么长的问题。谢谢。

Answer 1

为 .className 选择器定义 css animation 属性，而不是直接在 #div1 选择器定义，以避免将 #div1 选择器作为元素样式声明的主要来源。

在html处设置class。包括设置为all的transition和所描述效果的适当duration，在stacksnippets中使用2.5s。

在元素的click处使用window.getCompulatedStyle获取当前left和topcss属性值();将过渡 @keyframes 声明附加到 style 元素，并从元素的当前位置设置 left 和 top 。

在过渡动画的 animationend 事件中，将 "newanimation" 设置为元素 .style 属性的 animation 属性.

 div1 = document.getElementById("div1");
 div1.addEventListener("click", newfunc);
 
 function toggleAnimation() {

   this.className = "";
   this.style.animation = "newanimation 5s infinite alternate";
   this.removeEventListener("animationend", toggleAnimation);

  }

 function newfunc() {

   this.removeEventListener("click", newfunc);
   var left = window.getComputedStyle(this).left;
   var top = window.getComputedStyle(this).top;
   var css = `@keyframes to {
                from {
                  left: ${left};
                  top: ${top};
                }
                to {
                  left: 0px;
                  top: 0px;
                }
             }`;
             
  document.querySelector("style").textContent += `\n\n${css}`;
  this.style.animation = "to 2.5s 1 forwards";
  this.addEventListener("animationend", toggleAnimation);
  
 }

#div1 {
  height: 50px;
  width: 50px;
  background: red;
  position: relative;
  transition: all 1s ease;
}

.originalAnimation {
  animation: oldanimation 5s infinite alternate;
}

@keyframes oldanimation {
  0% {
    top: 0px;
    left: 0px;
    transform: rotate(45deg);
  }
  100% {
    top: 100px;
    left: 400px;
    transform: rotate(-45deg);
  }
}

@keyframes newanimation {
  0% {
    top: 0px;
    left: 0px;
  }
  100% {
    top: 300px;
    right: 300px;
  }
}

<div id="div1" class="originalAnimation"></div>

另请参阅Pausing CSS animation with javascript and also jumping to a specific place in the animation