web-dev-qa-db-ja.com

jQueryでtransitionendを使用するにはどうすればよいですか？

CSSの移行が完了したかどうかを検出してから、関数が再度繰り返されるようにして、マージンが乱れないようにする必要があります。

だから私はどのようなカムがあるのか

if (transitionend == true) {
  // do stuff
} else {
  // do nothing
}
jquerycss-transitions
33
JacobTheDev

以下のコードは、$ element変数にある要素のtransitionendイベントでトリガーします。 4つの異なるイベント名があり、これらはすべてのブラウザ間の不整合をカバーしていると思います。 '// your event handler'コメントを、イベントがトリガーされたときに実行したいコードに置き換えます。

$element.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    // your event handler
});
83
xram

これは link が役に立つと思います。

遷移が完了すると発生する単一のイベントがあります。 Firefoxでは、イベントはtransitionend、OperaではOTransitionEnd、WebKitではwebkitTransitionEndです。

el.addEventListener("transitionend", updateTransition, true);
6
Amin Eshaq

jQuery data を使用して、ステートフルデータを要素に添付します。ブール値を使用してイベントの発生を「ブロック」し、トランジションエンドが完了したらブール変数を反転します。 xramのコードを使用して、すべてのクロスブラウザー移行終了イベントを同時にフックします。

あなたの例では...

  1. onclick set this.data（ 'transitioning'、true）
  2. トランジションエンドが発火したら、this.data（ 'transitioning'、false）を設定します
  3. this.data（ 'transitioning'）== trueの場合、アニメーションを実行しません。これはキャプチャされ、クリックイベントでチェックされます。
2
Allison A

"touchendイベントをキャッチするにはどうすればよいですか？"または "mouseupイベント？"など.

これらはすべてこれらの観点で類似しています

  1. plural：ハンドラーは、単一のイベントによって起動されることが予期されている場合でも何度も起動されます

  2. depth：ハンドラーがイベントをキャッチする前に、イベントはツリー内でより深くバブリングしています。

例：

  1. マウスとタッチスクリーンの両方を備えたデバイスでは、touchstartの後にmousedownを続けることができます。

  2. 同様の理由で、touchendの後にmouseupを続けることができます。

  3. animationstartの後に、cssの記述方法に応じて、他の多くの同様のイベントが続く場合があります。

  4. animationendの後に、上記の理由から多くの同様のイベントが続くこともあります。

一連のsimilarイベントごとにハンドラーonceを起動する必要がある場合、つまりsthを押す人のような単一のアクションによって生成されるイベント。 イベントロックを導入し、イベントの開始時に1つ、終了時に1つのハンドラを使用する必要がありますサイドイベントのハンドラが必要ない場合や必要ない場合でも。

lockは、ご想像のとおり、ツリー内の親ノードの上位にあるプロパティです。

悪名高いイベントカップルの場合：animationstart-animationendこのような関数は次のようになります：

var oneTransition = (function(){
   var $parent,
       type,
       callback,
       unlockCallback,
       newCallback,
       start = 'webkitTransitionStart otransitionstart oTransitionStart msTransitionStart transitionstart',
       end = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';

   unlockCallback = function(){
      $parent.data('oneTransitionLock', false);
   };

   newCallback = function(e){
      if($parent.data('oneTransitionLock'))
         return;
      else
         $parent.data('oneTransitionLock', true);

      callback(e);
   };

   return function(){
      var args = Array.prototype.slice.call(arguments, 0);

      $parent = $(args[0]);     // 1st arg
      type = args[1];           // 2nd arg
      callback = args[2];       // 3rd arg

      if((args.length < 3) || ((type != 'start') && (type != 'end')) || (typeof(callback) != 'function'))
         return;

      $parent.off(start).off(end);
      if(type == 'start'){
         $parent.data('oneTransitionLock', false);
         $parent.on(start, newCallback);
         $parent.on(end, unlockCallback);
      }else if(type == 'end'){
         $parent.on(start, unlockCallback);
         $parent.on(end, newCallback);
      }
   }
})();

次のように呼び出すことができます：

oneTransition(node, 'start' or 'end', funcion(){...});

興味深い部分は、アニメーションの開始または終了のいずれかで実行できることです。

  1. 最初の引数。ノード参照

  2. 2番目の引数。コールバックのイベントを表す文字列

  3. 3番目の引数。実際のコールバック。

jsFiddle

1
centurian

トランジションの終了が最後に呼び出されたときに留意し、コールバックを一度だけトリガーするメソッドを作成できます。

function transitionEndsOnce($dom, callback) {
  var tick = Date.now();
  $dom.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(e) {
    var diff = Date.now() - tick;
    tick = Date.now();
    if (diff > 20) { // this number can be changed, but normally all the event trigger are done in the same time
      return callback && callback(e);
    }
  });
}

そして、単にこのように使用します

transitionEndsOnce($('...'), function(e){
  console.log('transition ends once');
});
1
Pouya