クリック時のCSS3キーフレームアニメーション（addClass付き）。どのようにCSSクラスを追加してCSS3のアニメーションを再起動する？

Question

私は問題があります。 Bounce.jsを使って素敵なメニューアニメーションを作成しています（いくつかのクールなエフェクトを使って）。 Bounce.jsは、再起動に問題が発生する可能性のあるcssキーフレームアニメーションを使用します。メニューがあり、ボタンをクリックすると.showクラスが追加されると、アニメーションが表示されます。しかし、そのボタンをもう一度押すと、非表示のアニメーション（以前のアニメーションと逆のバージョン）が追加されます。

Jsは動作しています（クラスは適切に追加および削除されています）が、アニメーションは1回だけ実行され、非表示のアニメーションはありません（メニュー要素は消えて消えます）。

Answer 1

あなたはservalの方法でそれを行うことができます。

1つの方法は、アニメーションクラスを追加する前に要素の再フローをトリガすることです。例えば

element.offsetWidth = element.offsetWidth; 

（バニラJS）：

if (element2.classList.contains('show')) { 
     element2.classList.remove("show"); 
     //restarting css3 keyframe animation 
     **element2.offsetWidth = element2.offsetWidth;** 
     element2.classList.add("hide"); 
    }else{ 
     element2.classList.remove("hide"); 
     //restarting css3 keyframe animation 
     **element2.offsetWidth = element2.offsetWidth;** 
     element2.classList.add("show"); 
    } 

jQueryのバージョン：それはこちら

if(settingPopup.hasClass('show')){ 
     settingPopup.removeClass('show'); 
     //line below is a fix to restart css3 keyframe animation 
     //settingPopup.outerWidth(settingPopup.outerWidth) 
     settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide'); 
    }else{ 
     settingPopup.removeClass('hide'); 
     //line below is a fix to restart css3 keyframe animation 
     //settingPopup.outerWidth(settingPopup.outerWidth) 
     settingPopup.outerWidth(settingPopup.outerWidth).addClass('show'); 
    } 

そして働いているフィドル： https://jsfiddle.net/zpawpvke/2/

に基づいて：https://css-tricks.com/restart-css-animation/