vue3transition+Animate实现页面动画显示效果

1. 准备

一个vue3项目包含基本路由配置，引入Animate.css库，集成了许多好玩的动画效果

$ npm install animate.css --save

2. 设置路由meta

在router路由配置文件中加上meta设置transition

//一个示例，在你的路由中在此位置配置
const routes:Array<RouteRecordRaw>=[
    {
       path:'/',
       component:()=>import('../components/add.vue'),
       meta:{
           title:'首页',
           transition:"animate__fadeIn"//关键，设置“淡入”属性，其它属性在Animate官网
        },
    }
]

3. 设置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库有许多效果，可以根据不同的需求使用。