快捷導(dǎo)航

Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果

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

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

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

在這里插入圖片描述

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

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

我的項(xiàng)目使用的是 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%); /* 進(jìn)入時(shí)從屏幕左側(cè)外部滑入 */
}
 
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10%); /* 離開時(shí)滑出到屏幕右側(cè)外部 */
}
</style>

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

在這里插入圖片描述

當(dāng)選擇“菜單管理”時(shí)，控制臺(tái)打印出以下警告信息：

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

此時(shí)，當(dāng)我嘗試切換到其他路由頁面時(shí)，頁面會(huì)顯示為空白。出現(xiàn)此問題的原因在于，Vue 3 中的組件要求其子節(jié)點(diǎn)必須是一個(gè)元素節(jié)點(diǎn)。

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

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

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

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

在這里插入圖片描述

進(jìn)入效果無效的解決辦法是我們需要手動(dòng)指定enter-from-class，如果不指定enter-form-class，則只有離開時(shí)候的動(dòng)畫有效。
這個(gè)在vue2中沒有出現(xiàn)，vue3中是這樣的，而且只要進(jìn)入的這一步需要自己指定。

最后代碼如下：

<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); /* 進(jìn)入時(shí)從屏幕左側(cè)外部滑入 */
}
 
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(10%); /* 離開時(shí)滑出到屏幕右側(cè)外部 */
}
</style>

效果如下：

在這里插入圖片描述