自身や親要素を非表示にするとtransitionEndは発火しない | jekylog

CSS3でアニメさせた後にはtransitionEndイベントが発火するので、ハンドラの中で初期化をしたり次の処理を書く機会が多いけど、自身や親要素を非表示にするとtransitionEndが発火しない。 下記のようなサンプルを用意すると確認できる。 「animation start」を押下。 右移動するアニメーションが終わる（5秒後に）と通常はtransitionEndが発火してコンソールで「animation done!」が表示され、初期座標に戻る。 再度「animation start」を押下し、アニメ中に「hide」ボタンを押下すると5秒経ってもtransitionEndは発火することはない。 「show」を押下して表示させるとアニメーションはスキップされて最終座標まで移動している。 まあ非表示の要素にtransitionEndが発火しないのはなんとなく分かるけどアニメーションがス