Vue3 realizes the transition of routing switching page animation

In this exercise, when using vue3+vue-router4 to realize the animation of routing switching pages, I thought it could be completed directly by using transition, but I didn’t expect that there would be constant problems in the process. Next, I will summarize the problems that occurred.

//我以为能实现效果的代码
<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>

realistic effect

Problem 1: The animation of leaving when the page is switched is invalid, only the animation of entering

Reason: When switching routes, from the DOM structure point of view, the DOM node is deleted in an instant, and the leaving effect cannot be realized.
Solution: Add<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>

Question 2: Added as above <keep-alive></keep-alive>, it still doesn't work, and a yellow warning is reported

Warning note: transition and keep-alive must now be used inside RouterView through the v-slot API
Official document description: https://router.vuejs.org/zh/guide/migration/index.html#router-view-%E3% 80%81-keep-alive-%E5%92%8C-transition
is modified as follows

<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>

Effect

Question 3: Before the animation of leaving a page is finished, the page to be switched appears

The element has a mode attribute, which is used to set the animation transition effect.

• The default is to perform both entry and exit of elements at the same time. The element is absolutely positioned position: absolute; There will be no misalignment.
• In-out, the new element transitions in first, and the current element transitions out after completion.
• out-in, the current element transitions out first, and the new element transitions in after completion.
  For details, see: 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>

Effect

Reference link: https://www.wubin.work/blog/articles/16