jQuery 插件：Animsition 为页面切换添加动画

Animsition可轻松的为页面切换添加18种不同风格的动画效果，动画特效可以应用到任何网站，也可以使用不同的效果在同一页面上。文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

官方问站：http://git.blivesta.com/animsition/文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

Github地址：https://github.com/blivesta/animsition文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

使用方法：文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

需要加载插件样式文件animsition.min.css、jquery.js、animsition.min.js文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

  <link href="../css/animsition.min.css" rel="stylesheet">
 <script src="../jquery.min.js"></script>
  <script src="../js/animsition.min.js" charset="utf-8"></script>

例如上滑动动画，在页面任意位置添加：文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

<div class="animsition-overlay"></div>

添加调用代码：文章源自知更鸟-https://zmingcx.com/jquery-animsition.html

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('.animsition-overlay').animsition({
		inClass: 'overlay-slide-in-top',
		outClass: 'overlay-slide-out-top',
		overlay: true,
		overlayClass: 'animsition-overlay-slide',
		overlayParentElement: 'body'
	}).one('animsition.inStart',
	function() {
		$('body').removeClass('bg-init');
		$(this).find('.item').append('<h2 class="target">Callback: Start</h2>');
		console.log('event -> inStart');
	}).one('animsition.inEnd',
	function() {
		$('.target', this).html('Callback: End');
		console.log('event -> inEnd');
	});
});
</script>

效果还是很炫酷，缺点是：只有页面所有元素完全加载完，才能显示动画，有点鸡肋...文章源自知更鸟-https://zmingcx.com/jquery-animsition.html 文章源自知更鸟-https://zmingcx.com/jquery-animsition.html