質問: EASE['InOutQuint']; // 2度目のアドイベントリスナー taki.addEventListener('webkitTransitionEnd', callback2); }); // 1度目のアドイベントリスナー selector.addEventListener('webkitTransitionEnd', callback1); /////////////////////////////////////////////////////////////////////////// ```
回答: 初めに疑問なのですが、どうして`transition`関連のプロパティに全てベンダプレフィックス(`webkit`)を付けているのでしょうか? 現在普及しているブラウザの9割以上は`transition`はプレフィックス無しで動作するはずです。 さて、`transitionend`イベントは変化したCSSプロパティの数だけ発火します。 なので、`callback`で`Event`オブジェクトを受けとって、特定のプロパティが変化したら次のアニメーションに進む、といった制御方法をするといいです。 変更する箇所としては`callback1`でしょうか。 ``` // 1度目のアドイベントリスナーで呼び出したい処理 callback1 = (function(e) { // opacity以外のプロパティの変化は無視します if (e.propertyName !== 'opacity') { return; } // 以下同じ ```