頁面過渡頁面切換

Animsition是一款使用jQuery來實現CSS3動畫的頁面切換動畫特效插件。該頁面切換動畫特效插件共有58種效果，按大類別來分可以分為：淡入淡出效果、旋轉、翻轉和放大縮小效果。另外每種效果都對應一種遮罩模式。通過Animsition你可以制作出各種炫酷的頁面切換效果。

瀏覽器兼容

Animsition需要支持CSS3的瀏覽器才能正常工作。

IE10+
Chrome
Safari
Firefox

使用方法

要使用該頁面切換動畫特效插件首先要引入相關的依賴文件。

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

HTML結構

如果所有頁面都使用相同的切換過渡效果，當前頁面用於顯示切換效果的內容使用一個class為 animsition 的 <div> 進行包裹，使用帶class為 animsition-link 的超鏈接或按鈕來跳轉頁面。class名稱可以修改，修改后后面的js代碼也要做相應的修改。

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

如果你希望每一個跳轉頁面的切換效果都不相同，可以使用下面的方法：

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

如果你希望每一個頁面都使用不同的動畫效果，可以使用下面的方法：

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

JAVASCRIPT

在頁面加載之后，可以使用下面的方法來調用該插件：

$(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'
  });
});

上面的參數十分簡單，看名稱就可以知道它的意思。其中， inClass 是進入時的頁面動畫方式， outClass 是切換到其它頁面時的動畫方式。上面的代碼是淡入淡出的進入和淡入淡出的切換到其它頁面。要使用不同的效果，就更換這兩個 class 。關於這些class共有58個，后面會一一列出。 overlay 是是否打開遮罩模式，如果設置為 true ，將會以遮罩的方式完成頁面切換過渡。

58種效果對應的class

Fade
fade-in	fade-out
Fade up
fade-in-up-sm	fade-in-up	fade-in-up-lg	fade-out-up-sm	fade-out-up	fade-out-up-lg
Fade down
fade-in-down-sm	fade-in-down	fade-in-down-lg	fade-out-down-sm	fade-out-down	fade-out-down-lg
Fade left
fade-in-left-sm	fade-in-left	fade-in-left-lg	fade-out-left-sm	fade-out-left	fade-out-left-lg
Fade right
fade-in-right-sm	fade-in-right	fade-in-right-lg	fade-out-right-sm	fade-out-right	fade-out-right-lg
Rotate
rotate-in-sm	rotate-in	rotate-in-lg	rotate-out-sm	rotate-out	rotate-out-lg
Flip X
flip-in-x-fr	flip-in-x	flip-in-x-nr	flip-out-x-fr	flip-out-x	flip-out-x-nr
Flip Y
flip-in-y-fr	flip-in-y	flip-in-y-nr	flip-out-fr	flip-out-y	flip-out-y-nr
Zoom
zoom-in-sm	zoom-in	zoom-in-lg	zoom-out-sm	zoom-out	zoom-out-lg

另外，該頁面切換過渡效果還有一組遮罩（Overlay）模式的 class ：

overlay-slide-in-top
overlay-slide-out-top
overlay-slide-in-bottom
overlay-slide-out-bottom
overlay-slide-in-left
overlay-slide-out-left
overlay-slide-in-right
overlay-slide-out-right