プラグインアニメーションについてどれだけ知っているかはわかりませんが、この記事はサンプルコードを通して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 サイトの他の関連記事を参照してください。