如何將eventlistener添加到使用dom隨機生成的元素？

我想改變在CSS中使用關鍵幀動畫的移動div的方向，我希望能夠點擊它並改變它的方向。這裏是我的代碼的樣子。如何將eventlistener添加到使用dom隨機生成的元素？

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'，並在點擊正方形時被激怒。我希望廣場從舊路徑平滑過渡到新路徑。目前它只是消失並遵循新的道路。有沒有辦法讓轉換流暢？對於長期的問題感到抱歉。謝謝。

來源

2017-04-14 craftdeer

定義cssanimation屬性用於.className選擇器，而不是直接在#div1選擇器，以避免特異性爲#div1選擇器是樣式聲明的元素的主要來源。

將class設置爲html。包括transition設置爲all和適當的duration爲所述的效果，使用2.5s在stacksnippets。

在元素click獲得當前left和topcss使用window.getComputedStyle()的屬性值;從元素的當前位置設置left和top，將@keyframes的轉換聲明附加到style元素。

在animationend事件的過渡動畫，設置"newanimation"到animation元素屬性.style屬性。

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

來源

2017-04-14 05:49:56 guest271314

如何將eventlistener添加到使用dom隨機生成的元素？

回答

相關問題