jqueryはCSSアニメーションを停止します

Web ページ制作では、アニメーション効果は非常に一般的な要素であり、CSS アニメーションは最も一般的な方法の 1 つです。ただし、進行中の CSS アニメーションを停止する必要がある場合は、jquery を使用する必要があります。この記事ではjqueryを使ってcssアニメーションを停止する方法を紹介します。

1. CSS アニメーションとは

CSS3 のアニメーション効果は、@keyframes ルールを使用して定義されます。要素にキーフレームやアニメーション時間などの属性を追加することで、さまざまなアニメーション効果を実現できます。

たとえば、次の CSS コードを定義して、左から右に移動するアニメーションを実装できます:

@keyframes move-right {
  0% { left: 0; }
  100% { left: 100px; }
}

#box {
  position: absolute;
  left: 0;
  animation: move-right 2s ease-out forwards;
}

上記のコードでは、「右に移動」アニメーションという名前のファイルを定義します。これにより、要素の左位置プロパティが 0% から 100% のキーフレームに設定されます。次に、このアニメーションを ID が「box」の要素に適用し、アニメーション時間を 2 秒に設定し、イージング効果を「ease-out」に設定して、最後に要素上のアニメーションの最終状態を保持します。

2. CSS アニメーションの停止

通常、CSS アニメーションは、定義したアニメーション時間とルールに従って最後までループします。ただし、アニメーションの実行中に停止する必要がある場合は、jquery を使用する必要があります。

まず、アニメーションを停止できるボタンまたはその他のトリガーを要素に追加し、そのトリガーにイベント リスナーを追加する必要があります。たとえば、以下のコードでは、ボタンを含む div 要素を作成し、ボタンの「クリック」イベント リスナーを追加します。

<div id="box" class="animated">
  <button id="stop-btn">停止动画</button>
</div>

次に、アニメーションの停止で jquery イベント リスナーを定義する必要があります。ユーザーがボタンをクリックしたとき。アニメーション要素の ID をイベント リスナーに渡し、jquery の「stop()」メソッドを使用してアニメーションを停止します。たとえば、次のコードでは、「stop-btn」という名前のボタンを作成し、それにクリック イベント リスナーを追加します。

$(document).ready(function() {
  $('#stop-btn').click(function() {
    $('#box').stop();
  });
});

上記のコードでは、jquery の「ready ()」メソッドを使用して、ページが読み込まれていることを確認し、ボタン要素のクリック イベント リスナーを追加しました。ユーザーがボタンをクリックすると、jquery は「box」という名前の要素で進行中のアニメーションを停止します。アニメーションを再生したい場合は、jquery の「animate()」メソッドを使用してアニメーションを再開する必要があることに注意してください。

3. jquery を使用して CSS アニメーションを停止する場合の注意点

jquery を使用して CSS アニメーションを停止する場合は、次の点に注意する必要があります:

1. jquery を使用すると、アニメーション中またはアニメーション終了後でいつでも、再生中の CSS アニメーションを停止できます。

2. "stop()" メソッドを使用して、指定した要素のすべてのアニメーションを停止することも、"stop(true)" メソッドを使用して、現在再生中のアニメーションを停止し、すぐに「stop(false)」メソッドは、現在再生中のアニメーションを停止し、現在の状態のままにします。

3. CSS アニメーションを停止すると、定義されているすべての CSS アニメーション プロパティとキーフレームがすぐに削除されます。つまり、アニメーションを再生したい場合は、CSS プロパティとキーフレームを再度追加する必要があります。

4. 概要

jquery を使用して CSS アニメーションを停止すると、再生中のアニメーションを簡単に停止し、必要に応じて再開できる非常に便利な方法です。ただし、実際に使用する場合には、アニメーションを定義する際に、再生や停止の内容を明確にする必要があり、また、アニメーションの再生に関するさまざまなステータスや属性を把握する必要があるなど、さまざまな細部に注意を払う必要があります。この記事ではjqueryを使って再生中のCSSアニメーションを停止する方法を中心に紹介しますので、皆様のお役に立てれば幸いです。

以上がjqueryはCSSアニメーションを停止しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。