jQuery を使用して animate.css をカプセル化する (詳細なチュートリアル)

ここで、animate.css を jQuery でカプセル化する例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

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');

上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立つことを願っています。

関連記事:

vuexの実装方法を詳しく解説(詳細チュートリアル)

MomentsでWeChat共有を実装し、Vueで友達を送る方法

vue.js 大規模なシングルページの構築方法application

javascript で暗黙的な呼び出しを使用するには?

webpackでのdevtoolの使用の詳細な説明

Reactコンポーネントでのrefsの使用方法

vue-cliプロジェクトでのProxyTableのクロスドメインの問題

Expressはクエリサーバーを構築します

jsの使用トリム関数をカスタマイズして両端のスペースを削除します

JavaScriptの動作原理

以上がjQuery を使用して animate.css をカプセル化する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。