Vue3使用transition實現組件切換的過渡效果

更新時間：2024年09月04日 09:44:42 作者：Stack Stone

<Transition> 是一個內置組件,這意味著它在任意別的組件中都可以被使用,無需注冊,它可以將進入和離開動畫應用到通過默認插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實現組件切換的過渡效果,需要的朋友可以參考下

由于我想在項目中實現路由組件切換時的平滑過渡效果，以避免頁面加載時的突兀感，大致效果如下：

在這里插入圖片描述

上面的代碼是使用的若依的代碼，代碼具體如下所示：

<section class="app-main">
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews">
      <router-view :key="key" />
    </keep-alive>
  </transition>
</section>
 
<style>
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}
 
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
 
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
 
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}
</style>

我的項目使用的是 VUE3 + TS，于是我仿照上面的寫法寫了下面的代碼：

<template>
  <section
    :class="[
      sectionClass,
      'flex-1 p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]'
    ]"
  >
    <!-- 渲染路由視圖 -->
    <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="getCaches">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
  <Footer v-if="footer" :class="footerClass" />
</template>
<style>
/* slide-left */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s;
}
 
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-10%); /* 進入時從屏幕左側外部滑入 */
}
 
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10%); /* 離開時滑出到屏幕右側外部 */
}
</style>

然而，在頁面渲染時，我遇到了以下問題：

在這里插入圖片描述

當選擇“菜單管理”時，控制臺打印出以下警告信息：

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.

此時，當我嘗試切換到其他路由頁面時，頁面會顯示為空白。出現此問題的原因在于，Vue 3 中的組件要求其子節(jié)點必須是一個元素節(jié)點。

然而，由于我在 <router-view> 組件中使用了 v-slot 來獲取路由組件的引用，并在 <component> 中渲染該引用，而我的 component 代碼中存在多個節(jié)點，導致 Vue 報出錯誤。

為了避免此問題，我將所有子組件都包裹在一個單一的根元素內，例如將原先的 Menu 組件改寫為如下代碼結構：

<template>
  <div class="app-container">
    <!-- 菜單管理的組件內容 -->
  </div>
</template>

雖然解決了組件渲染的問題，但我又發(fā)現，頁面切換時只有前一個組件消失時有過渡效果，而后一個組件顯示時卻是直接展現，沒有過渡效果。如下所示：

在這里插入圖片描述

進入效果無效的解決辦法是我們需要手動指定enter-from-class，如果不指定enter-form-class，則只有離開時候的動畫有效。
這個在vue2中沒有出現，vue3中是這樣的，而且只要進入的這一步需要自己指定。

最后代碼如下：

<template>
  <section
    :class="[
      sectionClass,
      'flex-1 p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]'
    ]"
  >
    <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in" enter-from-class="fade-transform-enter">
        <keep-alive :include="getCaches">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
  <Footer v-if="footer" :class="footerClass" />
</template>
<style>
/* slide-left */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s;
}
 
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-100px); /* 進入時從屏幕左側外部滑入 */
}
 
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10%); /* 離開時滑出到屏幕右側外部 */
}
</style>

效果如下：

在這里插入圖片描述