ここで、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');
MomentsでWeChat共有を実装し、Vueで友達を送る方法
vue.js 大規模なシングルページの構築方法application
vue-cliプロジェクトでのProxyTableのクロスドメインの問題
jsの使用トリム関数をカスタマイズして両端のスペースを削除します
以上がjQuery を使用して animate.css をカプセル化する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。