Vue3项目路由跳转transition过渡效果不生效问题求助

问题根因汇总 #

• 1. <router-view>放置位置错误
     你当前把带过渡的<router-view>写在了列表页的子组件内部，它只能渲染当前路由对应的子路由组件，如果你的Detail路由不是当前页面路由的子级，跳转后组件根本不会在这个<router-view>里渲染，自然不会触发过渡动画。正确的做法是把带过渡的<router-view>放在全局根组件App.vue中，作为所有路由页面的渲染出口。
• 2. CSS过渡属性拼写错误
     你样式里的transition: ass 0.3s ease-out;属于拼写错误，ass不是合法的过渡属性值，应该改为all表示对所有变化属性应用过渡。
• 3. 过渡触发缺少唯一标识
     Vue的<transition>需要检测到元素的销毁/创建才会触发动画，路由切换时如果组件被复用，可能不会触发过渡，需要给动态组件绑定唯一key，通常用路由的fullPath即可。

修复步骤 #

第一步：修改App.vue的全局路由出口 #

<template>
  <!-- 其他全局布局代码 -->
  <router-view v-slot="{ Component, route }">
    <transition name="route" mode="out-in">
      <component :is="Component" :key="route.fullPath" />
    </transition>
  </router-view>
</template>

第二步：修正过渡样式的拼写错误 #

/* Route transition */
.route-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.route-enter-active {
  transition: all 0.3s ease-out;
}

.route-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

.route-leave-active {
  transition: all 0.3s ease-in;
}

第三步：移除列表页组件内部多余的<router-view> #

你原来写在列表页里的<router-view>属于冗余代码，可以直接删掉，不需要在子页面里重复声明路由出口。

内容的提问来源于stack exchange，提问作者Kate P