vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 transition组件切换过渡

Vue3使用transition实现组件切换的过渡效果

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

然而，由于我在 <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>

效果如下：

在这里插入图片描述

以上就是Vue3使用transition实现组件切换的过渡效果的详细内容，更多关于Vue3 transition组件切换过度的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文