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

亚连
リリース: 2018-06-13 17:18:05
オリジナル
1991 人が閲覧しました

ここで、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 = &#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend&#39;;
  $(this).addClass(&#39;animated &#39; + animationName).one(animationEnd, function() {
  $(this).removeClass(&#39;animated &#39; + animationName);
  });
 }
});
//调用示例:
$(&#39;#box&#39;).animateCss(&#39;bounce&#39;);
ログイン後にコピー
上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立つことを願っています。

関連記事:

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

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

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

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

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

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

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

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

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

JavaScriptの動作原理

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート