JavaScriptイベントでCSSアニメーションを再度トリガーする

Question

JavaScriptを使用してCSSアニメーションを再度トリガーしようとしています。トリックをたくさん試して、何も動作しません。

ステップ：

1. <canvas class="shake">はdocument.body
2. shakeアニメーション作品に追加されます！
3. "Shake"ボタンを押してCSSを再追加します。
4. アニメーションは、再びをトリガーしません。

コード

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

コードは本当に簡単です。私はそこに本当にシンプルでまともなソリューションがあることを期待しています。私はバニラのJavaScriptを使用しています。

更新が解決しようと例は、作業コードを更新しました。

Answer 1

これを試してみてください：

... 
$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 = ""; 
}); 

... 

これは、アニメーションが終了した後トリガークラス名を削除するイベントリスナーを追加します。

Answer 2

クラスを削除してもう一度追加すると、アニメーションは再生されません。

小さな「遅れ」で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/

Answer 3

ある程度の遅延が働いてタイムアウトを追加します。私はanimation-durationに等しい遅延を追加しましたが、遅延の任意の量を追加すると動作します。

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