如何在vue3单个页面中使用第三方动画库

如何在vue3单个页面中使用第三方动画库

有时候整理东西感觉很简单没必要记录下来,但是我真的了解自己脑子不够用,对代码又不敏感,所以无论大小记下来就是了。免得以后又忘了,今天分享一个如何在vue3的H5但页面中使用第三方的动画库。我们直接用代码说话不吧。

代码部分

引入第三方动画库:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

详细文档请查看:Animate.css

html部分:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
		<script src="https://unpkg.com/vue@next"></script>
		<style>
			.content {
				width: 500px;
				height: 500px;
				margin: 50px auto;
				border: 3px solid #cccccc;
			}
		</style>
	</head>
	<body>
		<div id="app">
		</div>

		<script>
			const app = Vue.createApp({
				data() {
					return {
						show: true
					}
				},
				methods:{
					handleClick(){
						this.show = !this.show
					}
				},
				template:`
					<div class="content">
						<transition 
							enter-active-class = "animate__animated animate__bounce"
							leave-active-class = "animate__animated animate__fadeOutDown"
						>
							<div :class="animate" v-if="show">hello world</div>
						</transition>
						
						<button @click="handleClick">切换</button>
					</div>
				`
			})
			const vm = app.mount('#app');
		</script>
	</body>
</html>

以上一个小demo的全部代码,复制下载即可使用

根据官方文档选择自己喜欢的动画复制名字到上面就可以使用了。

enter-active-class = "animate__animated animate__bounce" 

leave-active-class = "animate__animated animate__fadeOutDown"

注意: animate__animated是必不可少的哦!

 

Vue3 系统入门与项目实战

🔥 超值套餐:Vue3从入门到组件化开发

1、《 Vue3.0(正式版) + TS 仿知乎专栏企业级项目》  百度云

2、《 Vue3.0+TS打造企业级组件库 前端中高级开发者必修课 》 完整无秘下载

3、《 Vue3 从入门到实战 进阶式掌握完整知识体系 》 网盘下载

 

⚠️:下载多套可加客服微信: ITBOKE (有优惠哦

 

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?