an ims ition 介绍
An ims ition ?是 一个 简单且易于使用的带动画的 页面 过度 jQuery 插件 ，它包含58种不同的动画 效果 。
用法
引入所需 文件<!-- an ims ition.css -->
<link rel="stylesheet" href="./ dis t/css/an ims ition.min.css">
<!-- jQuery -->
<script src="jquery.min.js"></script>
<!-- an ims ition.js -->
<script src="./ dis t/js/an ims ition.min.js"></script>
html<body>
<div class="an ims ition">
<a href="./page1" class="an ims ition-link">an ims ition link 1</a>
<a href="./page2" class="an ims ition-link">an ims ition link 2</a>
</div>
</body>
如果你想让每个 链接 使用不同的动画，可以这样写。
<a
href="./page1"
class="an ims ition-link"
data-an ims ition-out-class="fade-out-right"
data-an ims ition-out-duration="2000"
>
an ims ition link 1
</a>
<a
href="./page2"
class="an ims ition-link"
data-an ims ition-out-class="rotate-out"
data-an ims ition-out-duration="500"
>
an ims ition link 2
</a>
如果你想让每个 页面 使用不同的动画，可以这样写。
<div
class="an ims ition"
data-an ims ition-in-class="fade-in"
data-an ims ition-in-duration="1000"
data-an ims ition-out-class="fade-out"
data-an ims ition-out-duration="800"
>
...
</div>
调用 动画$(document).ready(function() {
$(".an ims ition").an ims ition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.an ims ition-link',
// e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
loading: true,
loadingParentElement: 'body',//an ims ition wrapper element
loadingClass: 'an ims ition-loading',
loadingInner: '',// e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
bro wser: [ 'animation-duration','-webkit-animation-duration'],
// " bro wser" option allows you to dis able the "an ims ition" in case the css property in the array is not supported by your bro wser.
// The default setting is to dis able the "an ims ition" in a bro wser that does not support "animation-duration".
overlay : false,
overlayClass : 'an ims ition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
});
事件
inStart$('.foo').on('an ims ition.inStart',function(){})
inEnd$('.foo').on('an ims ition.inEnd',function(){})
outStart$('.foo').on('an ims ition.outStart',function(){})
outEnd$('.foo').on('an ims ition.outEnd',function(){});
方法
IN$('.foo').an ims ition('in');
out$('.foo').an ims ition('out',$elem,url);
网站地址 : http://git.blivesta.com/animsition
GitHub: https://github.com/blivesta/animsition
网站描述: 简单易用的jQuery 插件 ，用于CSS动画 页面 过渡。
animsition官方网站
官方网站： http://git.blivesta.com/animsition
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。