准备
一个vue3项目包含基本路由配置,引入Animate.css库,集成了许多好玩的动画效果
$ npm install animate.css --save
设置路由meta
在router路由配置文件中加上meta设置transition
//一个示例,在你的路由中在此位置配置
const routes:Array<RouteRecordRaw>=[
{
path:'/',
component:()=>import('../components/add.vue'),
meta:{
title:'首页',
transition:"animate__fadeIn"//关键,设置“淡入”属性,其它属性在Animate官网
},
}
]
设置App.vue属性
导入animate样式
import 'animate.css';
设置app.vue路由加上transition,进入的样式从路由的meta中取出,注意animate样式需加上animate__animated前缀
<router-view #default="{route,Component}">
<transition :enter-active-class="`animate__animated ${route.meta.transition}`">
<component :is="Component"></component>
</transition>
</router-view>
完成以上配置再加载进入网页即可出现“淡入”效果
Animate库有许多效果,可以根据不同的需求使用。