あるボタンを押した時のアニメーション効果を連打しても確実に付けさせたい

あるボタンを押した時に、 ぽよんと反応するようなアニメーション効果を与えたい時があります。 その要素を押したら、例えば .click-animationのような、ぽよんとする CSS アニメーションを付けたクラスを、付与させる事が多いのですが、そんな時の実装 MEMO を残しておこうと思います。

従来の方法

要素を押した時に、.click-animationが既に付与されていたら、 削除してから付与しないとアニメーションしなく、 また削除して即付与してもアニメーションしないので、 setTimeout()などで適当な一定時間待って付与する事が多かったです。

$(target).removeClass("click-animation");
setTimeout(function () {
  $(target).addClass("click-animation");
}, 10);

もしくは、webkitAnimationEndなどを使って、アニメーション後にクラス削除などしていました。

$(target).addClass("click-animation");
$(target).on("webkitAnimationEnd", function () {
  $(target).removeClass("click-animation");
});

ただこれだと連打した場合に反応してくれない場合があります。

実装方法

requestAnimationFrameを使うと良さそうです。

$(target).removeClass("click-animation");
requestAnimationFrame(function () {
  $(target).addClass("click-animation");
});

これだと高橋名人ばりに連打した場合も確実にアニメーション効果を与える事ができました。 ブラウザの次のレンダリングフレームを待ってクラス付与してるから確実ということでしょうか。

Google I/O 2016 の実装サンプルでも、requestAnimationFrameを使った要素の付与や削除をやってるようでした。