当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 7:52:17

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

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