ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して animate.css コードをカプセル化する方法
今回は、jQueryを使用してanimate.cssコードをカプセル化する方法と、jQueryを使用してanimate.cssコードをカプセル化する際の注意事項を説明します。以下は実際的なケースです。 。
animate.css は、楽しいクロスブラウザーの css3 アニメーション ライブラリです。
まず、アニメーションCSSファイルを導入します
<link rel="stylesheet" href="animate.css" rel="external nofollow" >
次に、指定したアニメーションスタイル名を指定した要素に追加します
<p id="box" class="animated bounce"></p>
これには2つのクラス名が含まれており、最初のクラスは基本的なもので、スタイル名です実装する要素はこれを追加する必要があります。 2 番目は、指定されたアニメーション スタイル名です。
3. 要素にアニメーション スタイルを動的に追加したい場合は、jquery を通じて実行できます
アニメーション オブジェクト にクラスを追加し、アニメーション終了 イベント をリッスンします。アニメーションが終了したら、以前に追加したクラスをすぐに削除できます。
jQuery の公式パッケージは次のとおりです:
//扩展$对象,添加方法animateCss $.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; $(this).addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } }); //调用示例: $('#box').animateCss('bounce');
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。
推奨読書:
以上がjQuery を使用して animate.css コードをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。