vue 使用第三方animate css动画

最新推荐文章于 2025-06-30 23:10:09 发布

原创最新推荐文章于 2025-06-30 23:10:09 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何在Vue项目中引入并使用Animate.css动画库，通过实例演示了如何设置动画入场和离场效果，以及如何调整动画时长，为网页元素增加生动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animate css官网: https://daneden.github.io/animate.css/

<!DOCTYPE html>
<html>
<head>
	<title></title>
   <!-- 引入vue -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- animate css -->
   <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
</head>
<body>
	<div id = "app">
		<!--使用 enter-active-class 入场动画
			使用 leave-active-class 离场动画
			使用 :duration='毫秒值' 设置入场 和 离场的动画时长 -->
		<input type="button" value ="动画" @click="flag=!flag">
		<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter:200, leave:400 }">
			<h3 v-show="flag" class="animated" >this is  the word;</h3>
		</transition>
		
	</div>
	<script type="text/javascript">
	 var vue	= new Vue({
	 	 el:"#app",
	 	 data:{
	 	 	flag:false
	 	 }
		});
	</script>
</body>
</html>