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

最新推荐文章于 2024-05-10 09:33:05 发布

natalie86

最新推荐文章于 2024-05-10 09:33:05 发布

阅读量1.9k

点赞数

分类专栏： jquery 文章标签： css3 jquery

jquery 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

浏览器兼容

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

IE10+
Chrome
Safari
Firefox

使用方法

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

<link rel="stylesheet" href="./dist/css/animsition.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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

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

natalie86

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
58种jQuery模拟CSS3过渡页面切换特效

Animsition是一款使用jQuery来实现CSS3动画的页面切换动画特效插件。该页面切换动画特效插件共有58种效果，按大类别来分可以分为：淡入淡出效果、旋转、翻转和放大缩小效果。另外每种效果都对应一种遮罩模式。浏览器兼容Animsition需要支持CSS3的浏览器才能正常工作。IE10+ChromeSafariFir
复制链接

扫一扫