Beispiel für eine Zusammenfassung der Verwendung einer jQuery-Plugin-Animation

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!