CSS遷移時のコールバック

StackOverflow https://stackoverflow.com/questions/2087510

質問

CSS 遷移が完了したときに (コールバックなどの) 通知を受け取ることはできますか?

役に立ちましたか？

解決

私が知っているSafariの実装A webkitTransitionEnd のコールバックトランジションを持つ要素に直接接続できること。

その例（複数行に再フォーマット）：

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );

他のヒント

はい、ブラウザーでそのようなことがサポートされている場合は、移行が完了するとイベントがトリガーされます。ただし、実際のイベントはブラウザごとに異なります。

  • Webkit ブラウザ (Chrome、Safari) の使用 webkitTransitionEnd
  • Firefox が使用する transitionend
  • IE9以降での使用 msTransitionEnd
  • オペラの使い方 oTransitionEnd

ただし、次のことに注意してください。 webkitTransitionEnd 常に発火するわけではありません！これは何度も私を悩ませましたが、アニメーションが要素に影響を与えない場合に発生するようです。これを回避するには、イベント ハンドラーが期待どおりにトリガーされなかった場合に、タイムアウトを使用してイベント ハンドラーを起動することが合理的です。この問題に関するブログ投稿は次の場所から入手できます。 http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <--- 500 内部サーバー エラー

これを念頭に置いて、私はこのイベントを次のようなコードの塊で使用する傾向があります。

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms)

注記：遷移イベントの終了名を取得するには、次の回答として投稿されたメソッドを使用できます。ブラウザ間で CSS3 Transition 関数を正規化するにはどうすればよいですか?.

注記：この質問は次のことにも関連しています:- CSS3遷移イベント

私は、次のコードを使用しています、これは特定の終了イベントブラウザの使用を検出しようとするよりもはるかに簡単です。

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});
<時間>

またあなたは、ブートストラップを使用する場合は、あなたができるだけでDO 

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

これは、彼らがbootstrap.js

で以下のものを含むbecuaseであります 
+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

jQuery.transitプラグインに、CSS3の変換および遷移のためのプラグインは、あなたのCSSアニメーションを呼び出すことができますスクリプトから、あなたにコールバックを与えます。

所属していません StackOverflow
scroll top