Vue项目中使用Animate.cssdonghu动画库

最新推荐文章于 2024-01-08 10:04:58 发布

原创最新推荐文章于 2024-01-08 10:04:58 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue动画 #Vue项目中使用Animate.cssdonghu动画库

vue动画专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在HTML中使用动画效果，通过添加特定的类名和属性，如enter-active-class和leave-active-class，来实现元素的进入和离开动画。此外，还介绍了如何在页面加载时即刻展示动画，只需加入appear属性及相应的类名即可。

#在HTML中怎样使用

1.<link rel="stylesheet" href="js/animate.css">

<transition
			enter-active-class='animated bounce'
			leave-active-class='animated bounce'
		>
			<h1 v-show='show'>Hello Animate</h1>
		</transition>
		<button @click='head' type="button">start</button>

其中最主要的是enter-active-class（进入）和leave-active-class（离开）这两个类后面必须加animated

如果需要在刚进入页面的时候出现动画

<transition
			appear
			enter-active-class='animated bounce'
			leave-active-class='animated bounce'
			appear-active-class='animated bounce'
		>
			<h1 v-show='show'>Hello Animate</h1>
		</transition>
		<button @click='head' type="button">start</button>

这个需要加入appear这个属性和appear-active-class这个类动画