vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多典型的css3动画,兼容性好使用方便。
一、页面级路由转场动画实现思路参考
Vue Router官方过渡动效教程:https://router.vuejs.org/zh/guide/advanced/transitions.html
二、安装并全局导入Animate.css
- 安装
npm install animate.css
- 全局导入
//animate动画库引入
import 'animate.css'
- Vue集成使用第三方Animate.css动画库详细教程,查看我以前的文章。
Vue实现集成使用第三方Animate.css动画库详细教程(解决鼠标移入移出闪烁问题)
三、编写App.vue下RouterView相关代码
根据每个路由自定义的meta的动画类名,把自定义的路由动画animate.css导入到enter-active-class和leave-active-class当中实现不同页面使用不同的页面级路由专场动画。
- enter-active-class:设置进入的动画类名
- leave-active-class:设置离开的动画类名
<router-view v-slot="{ Component, route }">
<transition
name="fade"
:enter-active-class="route.meta.e_class"
:leave-active-class="route.meta.l_class"
>
<component :is="Component" />
</transition>
</router-view>
四、自定义路由meta的动画参数
import { createRouter,useRouter , createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'index',
meta: {
header:false,
footer:true,
e_class:"animate__animated",
l_class:"animate__animated animate__fadeOutLeft"
},
component: () => import('../views/index.vue')
},
{
path: '/login',
name: 'login',
meta: {
header:true,
footer:true,
e_class:"animate__animated animate__fadeInLeft",
l_class:"animate__animated animate__fadeOutLeft"
},
component: () => import('../views/login.vue')
}
});
本文原创,原创不易,如需转载,请联系作者授权。