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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!