58种jQuery模拟CSS3过渡页面切换特效

电玩女神 2022-08-07 09:56 223阅读 0赞

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

![201503251447.jpg][]

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

*  IE10+
 *  Chrome
 *  Safari
 *  Firefox

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

1.    
    
2.  <link rel="stylesheet" href="./dist/css/animsition.min.css">  
    
3.    
    
4.    
    
5.  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
    
6.    
    
7.    
    
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  
  
  
![QQ截图20150326105428.jpg][QQ_20150326105428.jpg]   
  
另外，该页面切换过渡效果还有一组遮罩（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

via:[http://www.htmleaf.com/jQuery/Layout-Interface/201503251572.html][http_www.htmleaf.com_jQuery_Layout-Interface_201503251572.html]

[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[201503251447.jpg]: http://bbs.html5cn.org/data/attachment/forum/201503/26/105923lmvl5idb33lle5dm.jpg
[QQ_20150326105428.jpg]: http://bbs.html5cn.org/data/attachment/forum/201503/26/1055262bbz2qe248d8rbqf.jpg
[http_www.htmleaf.com_jQuery_Layout-Interface_201503251572.html]: http://www.htmleaf.com/jQuery/Layout-Interface/201503251572.html