2012年12月8日土曜日

かわいく震えるやつと、webkitAnimationEnd

 昨日、ふと話題に上がったので、jsdo.itに「ちょっとかわいく震えるやつ」を書いてみた。

 なんだかんだ、CSS animationってまともに使った事なかったので、「クリックした直後だけ動かす」というのはどうやるんだっけか? と迷った。

 :hoverをトリガーにしてもちょっと違うし、.animeが付いてるときだけ動かすことにするかーというところは決まったのだけれど、どうやってクリックするたびに.animeが付いたと認識させるか。

ためしに

$('#box').click(function() {
  $(this).removeClass('anime');
  $(this).addClass('anime');
});

 これで行けるかと思ったらだめだった。.animeが消えてからもういちど付くまでの間に、レンダリング発生しないもんね。

$('#box').click(function() {
  var self = this;
  $(this).removeClass('anime');
 
  setTimeout(function () {
    $(self).addClass('anime');
  }, 100);
});

 結局こういう、ちょっと格好わるい形で書いて公開した。

その後

 公開したあと、そういえばCSS transitionの終了を捕まえるeventというのをどこかで見たのを思い出した。

 これと同じように、animationの終わりも捕まえられたら、そのタイミングで.animeをリセットするカタチにすれば、きれいに書けそう! というわけで探したらちゃんとありました。

 これを使って書き換えたのが、下のもの。 (eventの割り当てに $box.on とか $box.bind とか使ったらうまくいきませんでした。これはまた今度勉強します。)

var $box = $('#box');
 
$box.click(function() {
 $box.addClass('anime');
});
$box[0].addEventListener('webkitAnimationEnd', function(event){
 $box.removeClass('anime');
}, false);

完成形

 最終的にはこんな感じで、いちおう関数にして一般化してみました。

 クリック時の挙動をごにょごにょやるのは、よく使いそうなので、ちゃんと勉強してよかった。

0 件のコメント:

コメントを投稿