Animsition是一款使用jQuery来实现CSS3动画的页面切换动画特效插件。该页面切换动画特效插件共有58种效果，按大类别来分可以分为：淡入淡出效果、旋转、翻转和放大缩小效果。另外每种效果都对应一种遮罩模式。




浏览器兼容





Animsition需要支持CSS3的浏览器才能正常工作。





  • IE10+
  • Chrome
  • Safari
  • Firefox



使用方法




要使用该页面切换动画特效插件首先要引入相关的依赖文件。 



1.  <!-- animsition CSS -->
2.  <link rel="stylesheet" href="./dist/css/animsition.min.css">
3.  
4.  <!-- vendor js -->
5.  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
6.  
7.  <!-- animsition js -->
8.  <script src="./dist/js/jquery.animsition.min.js"></script>


复制代码


HTML结构



如果所有页面都使用相同的切换过渡效果，当前页面用于显示切换效果的内容使用一个class为animsition的<div>进行包裹，使用带class为animsition-link的超链接或按钮来跳转页面。class名称可以修改，修改后后面的js代码也要做相应的修改。 



1.  <body>
2.  
3.    <div class="animsition">
4.  
5.      <a href="./page1" class="animsition-link">animsition link 1</a>
6.  
7.      <a href="./page2" class="animsition-link">animsition link 2</a>
8.  
9.    </div>
10.  
11.  </body>


复制代码


如果你希望每一个跳转页面的切换效果都不相同，可以使用下面的方法： 



1.  <a
2.      href="./page1"
3.      class="animsition-link"
4.      data-animsition-out="fade-out-right"
5.      data-animsition-out-duration="2000"
6.    >
7.      animsition link 1
8.    </a>
9.  
10.    <a
11.      href="./page2"
12.      class="animsition-link"
13.      data-animsition-out="rotate-out"
14.      data-animsition-out-duration="500"
15.    >
16.      animsition link 2
17.    </a>


复制代码


如果你希望每一个页面都使用不同的动画效果，可以使用下面的方法： 



1.  <div
2.    class="animsition"
3.    data-animsition-in="fade-in"
4.    data-animsition-in-duration="1000"
5.    data-animsition-out="fade-out"
6.    data-animsition-out-duration="800"
7.  >
8.    ...
9.  </div>


复制代码


JAVASCRIPT



在页面加载之后，可以使用下面的方法来调用该插件： 



1.  $(document).ready(function() {
2.     
3.    $(".animsition").animsition({
4.     
5.      inClass               :   'fade-in',
6.      outClass              :   'fade-out',
7.      inDuration            :    1500,
8.      outDuration           :    800,
9.      linkElement           :   '.animsition-link',
10.      // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
11.      loading               :    true,
12.      loadingParentElement  :   'body', //animsition wrapper element
13.      loadingClass          :   'animsition-loading',
14.      unSupportCss          : [ 'animation-duration',
15.                                '-webkit-animation-duration',
16.                                '-o-animation-duration'
17.                              ],
18.      //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
19.      //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
20.       
21.      overlay               :   false,
22.       
23.      overlayClass          :   'animsition-overlay-slide',
24.      overlayParentElement  :   'body'
25.    });
26.  });


复制代码


面的参数十分简单，看名称就可以知道它的意思。其中，inClass是进入时的页面动画方式，outClass是切换到其它页面时的动画方式。上面的代码是淡入淡出的进入和淡入淡出的切换到其它页面。要使用不同的效果，就更换这两个class。关于这些class共有58个，后面会一一列出。overlay是是否打开遮罩模式，如果设置为true，将会以遮罩的方式完成页面切换过渡。



58种效果对应的class





 



另外，该页面切换过渡效果还有一组遮罩（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