vue3页面路由动效切换效果

一）路由页面配置tree判断进入还是后退

meta: {
  tree: 4
}

二）处理逻辑

watch(
  () => router.currentRoute.value.meta,
  (newValue: any, oldValue: any) => {
    if ((oldValue && oldValue.tree) && (newValue && newValue.tree)) {
      if (oldValue.tree > newValue.tree) {
        transitionName.value = 'return'
      } else {
        transitionName.value = 'slide'
      }
    } else {
      if ((newValue && newValue.tree) && !(oldValue && oldValue.tree)) {
        transitionName.value = 'slide'
      } else if (!(newValue && newValue.tree) && (oldValue && oldValue.tree)) {
        transitionName.value = 'return'
      } else {
        transitionName.value = 'brother'
      }
    }
  }, { immediate: true })



<router-view v-slot="{Component, route}">
      <transition :name="transitionName">
        <component :is="Component" :key="route.path" mode="out-in"></component>
      </transition>
    </router-view>

三）css样式

// 同页面跳转只要透明度过渡
.brother-enter-from {
    opacity: 0;
    transform: scale(0.8);
}

.brother-enter-active {
    transition: opacity 0.3s, transform 0.5s;
}

.brother-enter-to {
    opacity: 1;
    transform: scale(1);
}

.brother-leave-from {
    opacity: 1;
    transform: scale(1);
}

.brother-leave-active {
    transition: opacity 0.3s, transform 0.5s;
}

.brother-leave-to {
    opacity: 0;
    transform: scale(0.8);
}

// 起始状态
.slide-enter-from {
    transform: translateX(100%);
}

.slide-enter-active {
    transition: transform 0.3s ease;
}

.slide-enter-to {
    transform: translateX(0);
}


// 箭头返回页面效果
.return-enter-from {
    transform: translateX(-100%);
}

.return-enter-active {
    transition: transform 0.3s ease;
}
.return-enter-to {
    transform: translateX(0);
    opacity: 1;
}

.return-leave-from {
    display: none;
}

.return-leave-to {
    display: block;
}

上面的代码用display:none解决页面退出的动效会先显示上一级路由的页面然后再显示当前页面