JavaScriptでcssアニメーション(transiton)制御について

Question

現在、JavaScriptにてCSSのアニメーション制御を行っております。

同じセレクタに対しaddEventListener(webkitTransitionEnd)をネストして複数回利用していて、
違う関数を毎回セットする方法を用いております。

その際に、'webkitTransitionEnd'のコールバックが2回目以降トランジション終了時ではなく、
2回目以降の関数が全て同時に発火します。

この現象を防ぐためにはどのようなアニメーションの制御を行えばよいのでしょうか。

そもそもJavascriptで、同じ要素に対して連続したCSSアニメーションを制御する方法は、
addEvetLisenerを利用するやり方以外に行う方法はありますか。
(setTimeout以外でいい方法があれば教えていただきたいです)

教えていただけますと幸いです。よろしくお願い致します。

///////////////////////////////////////////////////////////////////////////
    var callback1 = function() { }
    var callback2 = function() { }
    var selector = document.getElementById('#example');
    selector.style.opacity                        = '0';
    selector.style.opacity                        = '750px';
    selector.style.webkitTransitionDuration       = '300ms';
    selector.style.webkitTransitionTimingFunction = EASE['InOutQuint'];
    // 2度目のアドイベントリスナー(ネストの中)で呼び出したい処理
    callback2 = (function(e) {
        // ここの処理がcallback1と同時に処理されてしまいます
        selector.removeEventListener('webkitTransitionEnd', callback2);
        selector.style.right                          = windowWidth / 2 - 10 + 'px';
        selector.style.bottom                         = windowHeight / 2 - 10 + 'px';
        selector.style.opacity                        = '0';
        selector.style.webkitTransitionDuration       = '450ms';
        selector.style.webkitTransitionTimingFunction = EASE['InOutQuint'];
    });
    // 1度目のアドイベントリスナーで呼び出したい処理
    callback1 = (function() {
        // ここでまずイベントリスナーをリムーブしています
        selector.removeEventListener('webkitTransitionEnd', callback1);
        selector.style.width                          = '20px';
        selector.style.height                         = '20px';
        selector.style.bottom                         = '20px';
        selector.style.right                          = '20px';
        selector.style.borderRadius                   = '10px';
        selector.style.transform                      = 'rotate(520deg)';
        selector.style.webkitTransitionDuration       = '450ms';
        selector.style.webkitTransitionTimingFunction = EASE['InOutQuint'];
        // 2度目のアドイベントリスナー
        taki.addEventListener('webkitTransitionEnd', callback2);
    });
    // 1度目のアドイベントリスナー
    selector.addEventListener('webkitTransitionEnd', callback1);
///////////////////////////////////////////////////////////////////////////

Answer 1

初めに疑問なのですが、どうしてtransition関連のプロパティに全てベンダプレフィックス（webkit）を付けているのでしょうか？　現在普及しているブラウザの9割以上はtransitionはプレフィックス無しで動作するはずです。

さて、transitionendイベントは変化したCSSプロパティの数だけ発火します。

なので、callbackでEventオブジェクトを受けとって、特定のプロパティが変化したら次のアニメーションに進む、といった制御方法をするといいです。

変更する箇所としてはcallback1でしょうか。

// 1度目のアドイベントリスナーで呼び出したい処理
callback1 = (function(e) {
  // opacity以外のプロパティの変化は無視します
  if (e.propertyName !== 'opacity') {
    return;
  }

  // 以下同じ

Comments

[退会済みユーザー]

突然すみません。こんにちは。

e.propertyNameは、この場合アニメーションの回数分取得することができますが、これはコンソールで表示される最後のプロパティだけ通すようにしなければならないでしょうか？(どのプロパティでも大丈夫ですか？)

[MakeNowJust]

時間的に一番最後に変化が終わるものが決まっているのであればそれにすべきですし、同じタイミングで複数発火することが分かっているならそのうちのどれか一つに絞ればいいはずです。

[退会済みユーザー]

たすかりました。ありがとうございます！