58种jQuery模拟CSS3过渡页面切换特效 A simple and easy jQuery plugin for CSS animated page transitions.

Installation

Step 1: Link required files

<!-- animsition CSS -->
<link rel="stylesheet" href="../dist/css/animsition.min.css">

<!-- vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- animsition js -->
<script src="../dist/js/jquery.animsition.min.js"></script>

Step 2: HTML markup

<body>

  <div class="animsition">


    <a href="./page1" class="animsition-link">animsition link 1</a>

    <a href="./page2" class="animsition-link">animsition link 2</a>

  </div>

</body>

If you want each "linkElement" to use a different animation.

<a
    href="./page1"
    class="animsition-link"
    data-animsition-out="fade-out-right"
    data-animsition-out-duration="2000"
  >
    animsition link 1
  </a>

  <a
    href="./page2"
    class="animsition-link"
    data-animsition-out="rotate-out"
    data-animsition-out-duration="500"
  >
    animsition link 2
  </a>

If you want to each page to use a different animation.

<div
  class="animsition"
  data-animsition-in="fade-in"
  data-animsition-in-duration="1000"
  data-animsition-out="fade-out"
  data-animsition-out-duration="800"
>
  ...
</div>

Step 3: Call the animsition

$(document).ready(function() {
  
  $(".animsition").animsition({
  
    inClass               :   'fade-in',
    outClass              :   'fade-out',
    inDuration            :    1500,
    outDuration           :    800,
    linkElement           :   '.animsition-link',
    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
    loading               :    true,
    loadingParentElement  :   'body', //animsition wrapper element
    loadingClass          :   'animsition-loading',
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ],
    //"unSupportCss" 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'
  });
});