animsition 介绍
Animsition 是一个简单且易于使用的带动画的页面过度 jQuery 插件，它包含58种不同的动画效果。
用法
引入所需文件
<!-- animsition.css -->
<link rel="stylesheet" href="./dist/css/animsition.min.css">
<!-- jQuery -->
<script src="jquery.min.js"></script>
<!-- animsition.js -->
<script src="./dist/js/animsition.min.js"></script>
html
<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-class="fade-out-right"
data-animsition-out-duration="2000"
>
animsition link 1
</a>
<a
href="./page2"
class="animsition-link"
data-animsition-out-class="rotate-out"
data-animsition-out-duration="500"
>
animsition link 2
</a>
如果你想让每个页面使用不同的动画，可以这样写。
<div
class="animsition"
data-animsition-in-class="fade-in"
data-animsition-in-duration="1000"
data-animsition-out-class="fade-out"
data-animsition-out-duration="800"
>
...
</div>
调用动画
$(document).ready(function() {
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',
loadingInner: '',// e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration','-webkit-animation-duration'],
// "browser" 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',
transition: function(url){ window.location.href = url; }
});
});
事件
inStart
$('.foo').on('animsition.inStart',function(){})
inEnd
$('.foo').on('animsition.inEnd',function(){})
outStart
$('.foo').on('animsition.outStart',function(){})
outEnd
$('.foo').on('animsition.outEnd',function(){});
方法
IN
$('.foo').animsition('in');
out
$('.foo').animsition('out',$elem,url);
网站地址:http://git.blivesta.com/animsition
GitHub:https://github.com/blivesta/animsition
网站描述:简单易用的jQuery插件，用于CSS动画页面过渡。
animsition
官方网站：http://git.blivesta.com/animsition
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。