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

Question

余白が台無しになるのを防ぐために、関数を再度繰り返すことを許可する前に、CSS トランジションが完了したかどうかを検出する必要があります。

だから私はどのようにカムのようなものを持っていますか

if (transitionend == true) {
  // do stuff
} else {
  // do nothing
}

Answer 1

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

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

Answer 2

このリンクが役立つと思います。

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

el.addEventListener("transitionend", updateTransition, true);

Answer 3

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

だからあなたの例のために...

1. onclick set this.data（'transitioning'、true）
2. transitionendが起動したら、this.data（'transitioning'、false）を設定します
3. this.data（'transitioning'）== trueの場合、アニメーションを実行しないでください。これはキャプチャされ、クリックイベントでチェックされます。