それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

CSS3アニメーションの終了イベント時にjavaScript(jquery)を実行する

CSS3アニメーション(Transition)で、画面の動きが終了した後,にjQuery を実行する

jQuery.bind でアニメーションの終了イベントを登録する

bind で登録できちゃうんですよ

$("#id_are").bind("webkitTransitionEnd",function(){
  $("#id_are").text("アニメ終了")
});

addEventListerでやりますが、bind / unbind が addEventLister / removeEventLister の代替だから、コレで動いちゃったりする。

CSS3のアニメーションonEnd 的な終了イベントは webkitTransitionEndです。

アニメーションの連鎖をする

$("#id_are").bind("webkitTransitionEnd",function(){
  $("#id_are").unbind("webkitTransitionEnd")
  $("#id_are").bind("webkitTransitionEnd",function(){
     $("#id_are").toggleClass("to2")
  })
});
$("#id_are").toggleClass("t1");

アニメーション(Transition)の終了で、次のイベントを仕込んで,さらにアニメーション(Transition)をさせる。たくさん連鎖するなら (Transition)より animation でキーフレームを指定した方が良いですね。

anination / transition

用語不定で困る。CSS3のアニメーションと言われたとき、transition/animationどちらで実装するか事前によく確認のこと

transition
開始・終了を指定する。一回限り
animation
開始・中間点・終了を指定する。ループ可能


transion と animation の大きな違いは keyframe 有無です。そして用途が全然違う。
CSS3のアニメーションって言うときには transition の事がほとんどなのでアニメーションするならググらずちゃんと本を読むか原典に当たる方がよさそうでした。

広告を非表示にする