脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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-cli构建项目下使用微信分享功能

    vue-cli构建项目下使用微信分享功能

    这篇文章主要介绍了vue-cli构建项目下使用微信分享功能,本文通过实例代码相结合的形式给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • vue操作dom并为dom增加点击事件方式

    vue操作dom并为dom增加点击事件方式

    这篇文章主要介绍了vue操作dom并为dom增加点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue如何从后台获取数据生成动态菜单列表

    vue如何从后台获取数据生成动态菜单列表

    这篇文章主要介绍了vue如何从后台获取数据生成动态菜单列表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue前端导出多级表头的excel表的示例代码

    vue前端导出多级表头的excel表的示例代码

    本文主要介绍了vue前端导出多级表头的excel表的示例代码,可以使用xlsx库来创建Excel文件,下面就来具体介绍一下,感兴趣的可以了解一下
    2024-06-06
  • Vue3+cesium环境搭建的实现示例

    Vue3+cesium环境搭建的实现示例

    本文主要介绍了Vue3+cesium环境搭建的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • vue中实现监听数组内部元素

    vue中实现监听数组内部元素

    这篇文章主要介绍了vue中实现监听数组内部元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 如何解决vuex在页面刷新后数据被清除的问题

    如何解决vuex在页面刷新后数据被清除的问题

    这篇文章主要介绍了如何解决vuex在页面刷新后数据被清除的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • 利用Vue3 (一）创建Vue CLI 项目

    利用Vue3 (一）创建Vue CLI 项目

    这篇文章主要介绍利用Vue3 创建Vue CLI 项目，下面文章内容附有官方文档链接，安装过程，需要的可以参考一下
    2021-10-10
  • 简单谈谈Vue3中的ref和reactive

    简单谈谈Vue3中的ref和reactive

    vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新,下面这篇文章主要给大家介绍了关于Vue3中ref和reactive的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue.js 中 ref 和 reactive 的区别及用法解析

    Vue.js 中 ref 和 reactive 的区别及用法解析

    在Vue.js中,ref主要用于创建响应式的引用,通过.value属性来访问和修改值,特别适用于需要频繁更改整个值的场景,而reactive则用于创建深度响应的对象或数组,本文给大家介绍Vue.js 中 ref 和 reactive 的区别及用法,感兴趣的朋友跟随小编一起看看吧
    2024-09-09

最新评论