Exemple de résumé d'utilisation de l'animation du plugin jQuery de partage

Je ne sais pas ce que vous savez sur l'animation du plugin. Cet article partage avec vous l'utilisation de l'animation du plugin jQuery à travers un exemple de code. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde.

Disposition d'utilisation

L'effet obtenu est l'effet de transition de divers effets différents

<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>

Attention ! ! ! L'opacité de la classe .animistion dans le fichier css est définie sur 0 ; elle doit être modifiée, sinon les éléments de la page ne seront pas visibles ! ! !

Recommandations associées :

Sélecteur de date de l'interface utilisateur jQuery Explication détaillée du sélecteur de date

Implémentation jQuery de la fonction de tri frontal des tables détaillée explication

Un exemple détaillé explique les défauts et les solutions de jQueryMobile à partir d'un contenu long

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!