jQuery を使用して CSS3 トランジションとアニメーションの終了を検出する方法-jsチュートリアル-php.cn

jQuery を使用して CSS3 トランジションとアニメーションの終了を検出する方法

Patricia Arquette

リリース： 2024-11-04 06:46:30

オリジナル

267 人が閲覧しました

How to Detect the End of CSS3 Transitions and Animations with jQuery?

CSS3 トランジションの活用: jQuery を使用した完了の検出

CSS3 トランジションを使用して要素をアニメーション化する場合、要素がアニメーション化される正確な瞬間を知る必要があります。後続のアクションを実行します。 jQuery アニメーションとは異なり、CSS3 トランジションには組み込みの完了コールバックがありません。

トランジション終了イベントのキャプチャ

トランジションの終了を検出するために、jQuery は次の機能を提供します。 script:

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

ログイン後にコピー

アニメーションの場合も、同様のアプローチを使用できます:

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

ログイン後にコピー

すべての接頭辞付きイベント文字列を渡すことにより、このスクリプトは複数のブラウザーで動作します。

単一起動に .one() を使用する

イベントハンドラーを 1 回だけ起動するには、.bind() の代わりに jQuery の .one() メソッドを使用できます:

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

ログイン後にコピー

非推奨と最新のアプローチ

jQuery の .bind() メソッドは現在非推奨です。推奨されるアプローチは .on() であり、.off() と連携して動作します。以下に例を示します。

<code class="javascript">$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });</code>

ログイン後にコピー

このアプローチでは、コールバック関数が 1 回だけ実行されることが保証されます。

以上がjQuery を使用して CSS3 トランジションとアニメーションの終了を検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。