このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2015.09.05

JavaScript AnimationEnd event の小話

どもです。

なんか久しぶりにJavaScript AnimationEndの事でも。

ありがたい事に昔の記事、

css3とjavascriptを利用する際に頻繁使用 webkitAnimationEndとwebkitTransitionEnd

を見てくれた方とかも多くて、以前、いろいろとお声をかけてくれたりでありがたい限りだった訳です。

最近では、無料ランキングtopの方に来ているゲームアプリを作っていたりで

写真 2015-09-02 22 52 16

「え。これ、htmlなの??」と驚かれていやはや。嬉しい限りです。

それはそうと、AnimationEndのevent取得する際、「あーこれそうだったなー」というのを書いておきます。

あ。わかってます。と言われるかもしれませんが、忘れやすい年頃でw

AnimationEnd

AnimationEndとTranstionEndに関しては、過去記事の

css3とjavascriptを利用する際に頻繁使用 webkitAnimationEndとwebkitTransitionEnd

を参考にしていただければと思います。

8dcbbcd680e4ead1215dd940261f9b6f

まぁ、css3で設定したキーフレームアニメーションの終わったタイミングでイベントが発生して、取得できますよねーと言った話。

Demo

(今回は、webkitブラウザ(safari,chrome)等のみで対応しています。)

アニメーションが終わったらアラートを出しています。

それでは、要素をアニメーションしている要素の入れ子にすると。

まー変わりはない感じですよね。

今度は、親要素のイベントを取得してみますと。

うん。親要素のイベント完了のみを取得したかったのに、意図した感じにならず2回アラートが呼び出されました。

これはイベントの伝播によるもので、詳しくは過去記事のこちらなどを参考に。

Javascript addEventListener イベント伝播

ev

何個もdomを入れ子にしようが

addEventListenerには第三匹数にtrueにして、useCaptureをtrueにしようが、

結果は同じとなってしまいますよね。

こういう時は、イベント元が自分自身かを「target」で判定しましょう。


意図したように自分のAnimationEndを取得できたかと思います。

なんちゃない話でしたね。。。

以上、軽い小話でした。

ではでは。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。