路由动画的封装

简介

路由过渡动画是对程序一种快速简便的增加个性化效果的的方法。

可以让你在程序的不同页面之间增加平滑的动画和过渡。

如果使用得当，可以使你的程序显得更加专业，从而增强用户体验。

页面切换的动画时间的同时，下一个页面初始化也在进行了，对用户体验来说，可以有效避免下一个页面的加载dom，初始化页面的时间。

封装思路

使用transition方式给根路由设置全局动画
给router的路径设置meta的level层级
在入口页面的setup 中，在路由守卫中，根据level的大小，设置相应的动画
定义相应的动画类样式

代码实现

css写出动画效果

根组件 App.vue，监听路由的变化

如果to索引大于from索引,使用前进的动画,反之使用后退的动画

level 可以使用数字，也可以字母，也可以数字加字母，能体现大小关系即可

export default {
  setup() {
    const router = useRouter()
    //默认值
    const state = reactive({
      transitionName: 'slide-left'
    })
    router.beforeEach((to, from) => {
      if (to.meta.level > from.meta.level) {
        state.transitionName = 'slide-left'// 向左滑动
      } else if (to.meta.level < from.meta.level) {
        // 由次级到主级
        state.transitionName = 'slide-right'// 向右滑动
      } else {
        state.transitionName = ''// 同级无过渡效果
      }
    })

    return {
      ...toRefs(state)
    }
  }
}