jQuery プラグイン animsition の使用法を共有する例の概要

小云云
リリース: 2017-12-29 09:20:34
オリジナル
2636 人が閲覧しました

プラグインアニメーションについてどれだけ知っているかはわかりませんが、この記事はサンプルコードを通してjQueryプラグインアニメーションの使用法を紹介していますので、必要な方は参考にしていただければ幸いです。みんなを助けることができる。

使用方法

達成される効果は、さまざまな効果を持つさまざまなトランジションエフェクトです

<p class="animsition">
  <p class="item bg-indigo">
   <h1>Animsition: Sandbox</h1>
  </p>
  <h2>Defaults</h2>
  <ol>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page1.html" rel="external nofollow" >Basic</a></li>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page2.html" rel="external nofollow" >Options</a></li>
  </ol>
 </p>

<script src="jquery-3.2.1.min.js"></script>
  <script src="js/animsition.js"></script>
 <script>
  $(document).ready(function() {
 $(".animsition").animsition({
  inClass: 'flip-in-y',
  outClass: 'flip-out-y',
  inDuration: 1500,
  // outDuration: 800,
  linkElement: '.animsition-link',
  // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
  loading: false,
  loadingParentElement: 'body', //animsition wrapper element
  loadingClass: 'animsition-loading',
  loadingInner: '', // e.g '<img src="loading.svg" />'
  timeout: false,
  timeoutCountdown: 5000,
  onLoadEvent: true,
  browser: [ 'animation-duration', '-webkit-animation-duration'],
  // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
  // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
  overlay : false,
  overlayClass : 'animsition-overlay-slide',
  overlayParentElement : 'body',
  // transition: function(url){ window.location.href = url;}
 });
});
  </script>
ログイン後にコピー

注意してください! ! ! CSS ファイルの .animistion クラスの不透明度は 0 に設定されています。変更しないとページ要素が表示されません。 ! !

関連する推奨事項:

jQuery UI 日付ピッカー Datepicker の詳細な説明

jQuery のテーブル フロントエンド ソート機能の実装の詳細な説明

jQueryMobile フォームの長いコンテンツの欠陥と解決策の例の詳細な説明

以上がjQuery プラグイン animsition の使用法を共有する例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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