用JavaScript事件再次觸發CSS動畫

我試圖用JavaScript再次觸發CSS動畫。嘗試了很多技巧，沒有任何工作。用JavaScript事件再次觸發CSS動畫

步驟：

<canvas class="shake">添加到document.body
shake動漫作品！
按"Shake"按鈕重新添加CSS。
動畫不會再被觸發。

代碼

https://jsbin.com/pasitic/edit?css,js,console,output

的代碼是非常簡單的。我希望有一個非常簡單和體面的解決方案。我使用的是香草JavaScript。

更新

解決，例如與運行的代碼更新。

來源

2016-09-16 Şerban

試試這個：

... 
$btn.addEventListener("click", function(e) { 
    e.preventDefault(); 
    console.log("clicked"); 

    $canvas.className = "shake"; // Doesn't trigger the animation! 
}); 

$canvas.addEventListener("animationend", function(e) { 
    $canvas.className = ""; 
}); 

...

它增加了一個事件偵聽器刪除動畫結束後觸發類的名稱。

來源

2016-09-16 16:39:56 Brian

不錯，這個作品。我已經更新了這個例子。 –

如果您刪除某個類並再次添加，則動畫將無法播放。

你可以在一個setTimeout函數中添加「shake」類並延遲一段時間，動畫就可以工作。

$canvas.className = ""; 

setTimeout(function(){ 
    $canvas.className = "shake"; 
}, 50);

您也可以使用以下方法：

$canvas.classList.remove("shake"); 
void $canvas.offsetWidth; 
$canvas.classList.add("shake");

的$canvas.offsetWidth;將觸發迴流。

你可以閱讀更多關於它在這裏： https://css-tricks.com/restart-css-animation/

來源

2016-09-16 16:35:37 Eilimint

感謝您選擇這種替代解決方案。我測試了'setTimeout'解決方案，它工作。我不想觸發我的畫布元素的迴流，但很高興知道這個技巧！ –

添加暫停時以一些延遲工作。我添加了等於animation-duration的延遲，但添加任何數量的延遲都會起作用。

$btn.addEventListener("click", function(e) { 
    e.preventDefault(); 
    console.log("clicked"); 
    $canvas.className = 'shake'; 
    setTimeout(function(){ $canvas.className = ''; }, 500); 
});

來源

2016-09-16 16:39:48 Kshitiz

用JavaScript事件再次觸發CSS動畫

回答

相關問題