页面过渡 页面切换

2019/04/24 18:01
阅读数 174

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
本文版权属于jQuery之家,转载请注明出处: http://www.htmleaf.com/jQuery/Layout-Interface/201503251572.html
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部