VUE3 使用＜transition＞实现组件切换的过渡效果

news2024/11/15 8:09:21

由于我想在项目中实现路由组件切换时的平滑过渡效果，以避免页面加载时的突兀感，大致效果如下：
在这里插入图片描述
上面的代码是使用的若依的代码，代码具体如下所示：

<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 中的组件要求其子节点必须是一个元素节点。

然而，由于我在 <router-view> 组件中使用了 v-slot 来获取路由组件的引用，并在 <component> 中渲染该引用，而我的 component 代码中存在多个节点，导致 Vue 报出错误。

为了避免此问题，我将所有子组件都包裹在一个单一的根元素内，例如将原先的 Menu 组件改写为如下代码结构：

<template>
  <div class="app-container">
    <!-- 菜单管理的组件内容 -->
  </div>
</template>

虽然解决了组件渲染的问题，但我又发现，页面切换时只有前一个组件消失时有过渡效果，而后一个组件显示时却是直接展现，没有过渡效果。如下所示：
在这里插入图片描述
进入效果无效的解决办法是我们需要手动指定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>