如何在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 （有优惠哦）
