Ich weiß nicht, wie viel Sie über die Plugin-Animation wissen. Er ist sehr gut und hat Referenzwert Ich hoffe, es kann allen helfen.
Nutzungsvereinbarung
Der erzielte Effekt ist der Übergangseffekt verschiedener unterschiedlicher Effekte
<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>
Achtung! ! ! Die Deckkraft der .animition-Klasse in der CSS-Datei ist auf 0 gesetzt; sie muss geändert werden, sonst sind die Seitenelemente nicht sichtbar! ! !
Verwandte Empfehlungen:
jQuery UI-Datumsauswahl Datepicker, detaillierte Erklärung
jQuery-Implementierung der Tabellen-Front-End-Sortierfunktion im Detail Erklärung
Ein detailliertes Beispiel erklärt die Mängel und Lösungen von jQueryMobile aus langem Inhalt
Das obige ist der detaillierte Inhalt vonBeispiel für eine Zusammenfassung der Verwendung einer jQuery-Plugin-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!