脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 transition组件切换过渡

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

然而，由于我在 <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组件切换过度的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue如何实现简易流程图

    vue如何实现简易流程图

    这篇文章主要介绍了vue如何实现简易流程图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • petite vue的使用示例详解

    petite vue的使用示例详解

    这篇文章主要为大家介绍了petite vue的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • Vue实现验证码功能

    Vue实现验证码功能

    这篇文章主要为大家详细介绍了Vue实现验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vue2无法监听数组下标和对象新增属性的原因和解决方法

    Vue2无法监听数组下标和对象新增属性的原因和解决方法

    文章详细解释了Vue2中无法监听对象属性新增/删除和数组下标变化的原因,并提供了解决方案,如使用Vue.set和重写数组方法,还对比了Vue3的Proxy,强调了Proxy在监听机制和性能上的优势,需要的朋友可以参考下
    2026-05-05
  • vue中如何携带参数跳转页面

    vue中如何携带参数跳转页面

    这篇文章主要介绍了vue中如何携带参数跳转页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue必学知识点之forEach()的使用

    Vue必学知识点之forEach()的使用

    在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，这时候就需要用到forEach()了，下面这篇文章主要给大家介绍了关于Vue必学知识点之forEach()使用的相关资料，需要的朋友可以参考下
    2021-05-05
  • Vue3+Vite+TS使用elementPlus时踩的坑及解决

    Vue3+Vite+TS使用elementPlus时踩的坑及解决

    这篇文章主要介绍了Vue3+Vite+TS使用elementPlus时踩的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

    使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

    这篇文章主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue使用Google Recaptcha验证的实现示例

    vue使用Google Recaptcha验证的实现示例

    我们最近的项目中需要使用谷歌机器人验证，所以就动手实现一下，本文就来详细的介绍一下vue Google Recaptcha验证，感兴趣的可以了解一下
    2021-08-08
  • 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

    这篇文章主要介绍了解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题,需要的朋友可以参考下
    2017-11-11

最新评论