突然ですが…
１・ある要素をクリックすると、javascript（jquery）でクリックした要素にClassが追加され、CSSで設定した全体で２秒間のアニメーションが実行される。
２・同じ要素をもう一度クリックすると、最初のアニメーションが逆再生されて元の状態に戻る。（以降ループ…）
というコードを作成したとします。
仮に以下の様な内容の場合
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
}
#click {
cursor: pointer;
background-color: #000;
transition: all 2s;
}
#click.on {
background-color: #fff;
}
</style>
</head>
<body id="click" class=""></body>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#click").click(function() {
$("#click").toggleClass("on");
});
});
</script>
</html>
上記のコードは画面をクリックする事で、２秒間掛けて背景色が変化するのですが…（コピペで確認可能です）
・javascriptが発火してから処理が完了するまでの時間は長く見積もっても0.05秒
・要素にClassが追加され、CSSアニメーションが完了するまでに2秒
javascriptとCSSの動作は独立している為、javascriptが発火してからアニメーションが完了するまであと1.95秒残っているのに、javascriptの方は次の入力を受け付けてしまう為、ダブルクリックしてしまうとアニメーションが完了する前に次のアニメーションが開始され、現在のアニメーションが中断されてしまいます。
この課題を解決する方法を自分なりに考えた結果…
対策
⇒クリック制限クラスとsetTimeoutと組み合わせる事で、CSSアニメーションが完了するタイミングまでjavascriptの処理を遅延させる
対策前
$("#click").click(function() {←クリックで発火
$("#click").toggleClass("on");←アニメーションクラスの切り替え
});
対策後
<style>
.lock {
cursor: none;←カーソルの表示を変更
pointer-events: none;←要素のクリックイベントを無効化
}
</style>
$("#click").click(function() {←クリックで発火
$("#click").addClass("lock");←クリック制限クラスを追加
$("#click").toggleClass("on");←アニメーションクラスの切り替え（CSSアニメーション終了まで２秒）
setTimeout(function(){
$("#click").removeClass("lock");
},2000);←CSSアニメーション終了（２秒）後にクリック制限クラスを解除
});
対策版はコチラ ↓
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
}
#click {
cursor: pointer;
background-color: #000;
transition: all 2s;
}
#click.on {
background-color: #fff;
}
.lock {
cursor: none;
pointer-events: none;
}
</style>
</head>
<body id="click" class=""></body>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#click").click(function() {
$("#click").addClass("lock");
$("#click").toggleClass("on");
setTimeout(function(){
$("#click").removeClass("lock");
},2000);
});
});
</script>
</html>
最初はif関数で発火条件を指定してみたり、クリック要素そのものを削除したりと色々試行錯誤しましたが、現状ではこの方法が使い勝手が良いと感じました。
あくまで自分用のメモですが、参考になれば幸いです。