jQuery-plugin-animsition

用法整理

下载地址：https://github.com/blivesta/animsition

文档地址：http://git.blivesta.com/animsition/

实现的效果是，各种不同效果的转场效果

 

<div class="animsition">

    <div class="item bg-indigo">
      <h1>Animsition: Sandbox</h1>
    </div>

    <h2>Defaults</h2>
    <ol>
      <li><a class="animsition-link" data-animsition-out-class="rotate-out"
  data-animsition-out-duration="500" href="page1.html">Basic</a></li>
      <li><a class="animsition-link"  data-animsition-out-class="rotate-out"
  data-animsition-out-duration="500" href="page2.html">Options</a></li>
    </ol>

  </div>

<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类的opacity设置了为0；需要改过来，要不然页面元素看不到！！！