DOMを使ってランダムに生成された要素にeventlistenerを追加する方法は？

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

正方形はで、現在、左から右へ移動し、やや下向きになり、キーフレーム 'oldanimation' によってトリガーされるDIVデフォルト。だから私は 'newanimation'とラベルされた新しいキーフレームアニメーションを作成することにしました。そして、正方形がクリックされると三角形になりました。正方形が古いパスから新しいパスにスムーズに移行するようにします。現在、それは消えて新しい道をたどります。移行をスムーズにする方法はありますか？長い質問を申し訳ありません。ありがとうございました。

Answer 1

要素のスタイル宣言の主要源である#div1セレクタに関して特異性を避けるために、#div1セレクタに直接.classNameセレクタためcssanimationプロパティを定義し、代わりに。

classをhtmlに設定します。上記の効果についてtransitionをallに、適切にはdurationに設定し、スタックニッペットで2.5sを使用してください。

要素の現在のleftとtopcssのclickのプロパティ値はwindow.getComputedStyle()を使用します。要素の現在位置からleftとtopを設定してstyle要素に遷移@keyframes宣言を追加します。

animationendアニメーションを遷移させるイベントでは、要素.styleのプロパティの"newanimation"から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