JavaScriptライブラリなしで移行終了を検出するにはどうすればよいですか？

Question

CSSトランジションでアニメーションが終了したオブジェクトを削除したいのですが、JavaScriptライブラリを使用できません。

アニメーションの実行を検出するにはどうすればよいですか？ コールバックまたはカスタムイベントは何とか使用しますか？

Answer 1

element.addEventListener('transitionend', function(event) { 
    alert("CSS Property completed: " + event.propertyName); 
}, false); 

今のところ、正確なイベント名は標準化されていません。 MDNからの引用は次のとおりです。

遷移が完了すると1つのイベントが発生します。
すべての標準準拠のブラウザでは、WebKitのイベントはtransitionend,
です。webkitTransitionEndです。

ここでWebkitのためのフィドルだ：私は現在、私はMarakanaチュートリアルから便利な、クロスブラウザの実装を共有しましょうまったく同じことをやっているとhttp://jsfiddle.net/bNgWY/

Answer 2

。

// First, we store the names of the event according to the browsers 

    var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd']; 

      //For each of them... 
      for(var i in navigatorsProperties) 
      { 
       //We attach it to our overlay div 
       el.addEventListener(navigatorsProperties[i],function() 
       { 
        // Here's the code we want to fire at transition End 
         console.log('transition end'); 

       },false); 
      } 

それは（MSDNを参照）IE10がtransitionendでトランジションをサポートしていることに留意すべきです。 （ので、これらのブラウザのためmsTransitionendまたは何をしようとしません）以下

IE9とはないサポート遷移を行う（caniuse.comを参照）ので、あなたは、遷移端に任意のイベントリスナーを添付することができません。

編集： ModernithrのGithubに関するドキュメントを読んで、クロスブラウザのポリフィルページを見つけました。他の多くの有用なリンクの中で、私はこれを見つけましたが、これは小さくても非常に良いtransitionend scriptです。

マインドのGithub README.mdの例では、jQueryのを使用しますが、それはバニラJavaScriptで書かれている通り、ライブラリが実際に無ライブラリと依存関係のないが必要であること。

Answer 3

私の要件を満たした適切な「移行期」ポリフィルを見つけることができませんでした。したがって、遷移先を1回フックするためのものが必要な場合は、次のようにしてください：

(function() { 
    var i, 
     el = document.createElement('div'), 
     transitions = { 
      'transition':'transitionend', 
      'OTransition':'otransitionend', // oTransitionEnd in very old Opera 
      'MozTransition':'transitionend', 
      'WebkitTransition':'webkitTransitionEnd' 
     }; 

    var transitionEnd = ''; 
    for (i in transitions) { 
     if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { 
      transitionEnd = transitions[i]; 
      break; 
     } 
    } 

    Object.prototype.onTransitionEndOnce = function(callback) { 
     if (transitionEnd === '') { 
      callback(); 
      return this; 
     } 
     var transitionEndWrap = function(e) { 
      callback(); 
      e.target.removeEventListener(e.type, transitionEndWrap); 
     }; 
     this.addEventListener(transitionEnd, transitionEndWrap); 
     return this; 
    }; 
}());