Title

点击Button进行页面切换,可以看到转场动画效果。

引入CSS

<link rel="stylesheet" href="http://newfront.free4inno.com/css/animate/animate.min.css"/>
			

使用方法

<div class="panel panel-default front-panel animated zoomIn">
	<div class="panel-body front-news-panel">
		<div class="media">
			<div class="media-body">
				<h4 class="media-heading front-text-break">Title</h4>
				<p class="front-text-break">点击Button进行页面切换,可以看到转场动画效果。</p>
			</div>
		</div>
	</div>
</div>

//此动画涉及两个效果,zoomIn及zoomOut,在需要使用动画效果的元素上加上名为animated和zoomIn或zoomOut的类即可。

<script>
	$("#freeshare").find("a").click(function() {
		if ($(".animated").hasClass("zoomIn")) {
			$(".animated").removeClass("zoomIn");
			$(".animated").addClass("zoomOut");
			setTimeout(function() {
				$(".animated").removeClass("zoomOut")
			}, 500);
			$(".animated").addClass("zoomIn");
		}
	});
</script>