vue3实现路由切换页面动画之transition

本次练习在使用vue3+vue-router4实现路由切换页面动画时，本来以为使用transition就可以直接完成了，但没想到过程中问题不断，接下来就总结一下出现的问题

//我以为能实现效果的代码
<template>
  <div class="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
a {
    
    
  padding: 20px;
}
.fade-enter-from,
.fade-leave-to {
    
    
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 0;
}
.fade-leave-to {
    
    
  transform: translateX(20px);
}
.fade-enter-to {
    
    
  transform: translateX(-20px);
}
.fade-enter-to,
.fade-leave-from {
    
    
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}
.fade-leave-active,.fade-enter-active {
    
    
  transition: all 0.5s ease-out;
}
</style>

现实效果

问题一：页面切换时离开的动画失效，只有进入时的动画

原因：在切换路由时，从DOM结构上看就是DOM节点一瞬间被删除了，离开效果也就没办法实现了
解决：加<keep-alive></keep-alive>

<template>
  <div class="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <div class="content">
      <transition name="fade">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

问题二:如上加上<keep-alive></keep-alive>，仍然不起作用，而且报黄色警告

警告说明：transition和keep-alive现在必须通过v-slot API 在RouterView内部使用
官方文档说明：https://router.vuejs.org/zh/guide/migration/index.html#router-view-%E3%80%81-keep-alive-%E5%92%8C-transition
修改如下

<template>
  <div class="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <div class="content">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </div>
</template>

效果

问题三：一个页面离开动画还没执行完，要切换的页面就出现了

元素有一个mode属性，用于设置动画过渡效果。

• 默认是同时进行元素的进入和离开。元素绝对定位position: absolute;不会有错位问题。
• in-out，新元素先进行过渡进入，完成之后当前元素过渡离开。
• out-in，当前元素先过渡离开，完成之后新元素过渡进入。
  具体详解见：https://cn.vuejs.org/api/built-in-components.html#transition

<template>
 <div class="app">
   <router-link to="/about">about</router-link>
   <router-link to="/home">home</router-link>
   <div class="content">
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
   </div>
 </div>
</template>

效果

参考链接： https://www.wubin.work/blog/articles/16