脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3+Tsx给路由加切换动画踩坑

Vue3+Tsx给路由加切换动画时的踩坑及解决

 更新时间：2023年01月21日 08:47:00   作者：头发掉完就不学了  
这篇文章主要介绍了Vue3+Tsx给路由加切换动画时的踩坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

项目场景

用最新的技术栈Vue+Tsx给后台管理系统路由加动画时，语法上与模板语法有些许不同，记录下自己的踩坑记录

样式文件

新建文件transition.scss，这里用的是若依框架人家写好的样式，写好之后在全局引入该样式文件

// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.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 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

步骤

首先是第一步尝试给路由加过渡动画，代码如下

<div style={{ flex: "1", paddingTop: "12px", height: 0 }}>
<Transition name="fade-transform" mode="out-in">
    <RouterView  v-slots={{
        default: ({ Component: RouteComponent }: { Component: any }) => {
            return <RouteComponent />
        }
    }}
    ></RouterView>
</Transition>
</div>

这时候路由完全没动画并且报了一个警告

Component inside <Transition> renders non-element root node that cannot be animated.  

意思是在Transition动画节点下只能有一个根节点，这时候再尝试把RouteComponent外面套一层div

<div style={{ flex: "1", paddingTop: "12px", height: 0 }}>
<Transition name="fade-transform" mode="out-in">
    <RouterView  v-slots={{
        default: ({ Component: RouteComponent }: { Component: any }) => {
            return <div><RouteComponent /></div>
        }
    }}
    ></RouterView>
</Transition>
</div>

这时候还是没有切换动画的，新警告来了

<router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:
<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

意思是说router-view不能放在transition下，好的那我们换一种写法试试

<div style={{ flex: "1", paddingTop: "12px", height: 0 }}>
  <RouterView v-slots={{
      default: ({ Component: RouteComponent }: { Component: any }) => {
          return <Transition name="fade-transform" mode="out-in">
              <div> <RouteComponent /></div>
          </Transition>
      }
  }}
  ></RouterView>
</div>

这时候就很完美，没警告了。但是？？王德发？？切换动效在哪里？？我陷入了沉思，官方文档里给的示例是切换显示隐藏的时候用v-if，也就是隐藏的时候dom节点被销毁了，是不是我这个没重新渲染呢？？这时候给div加上一个动态的key让它重新渲染就好了

import {useRoute } from 'vue-router';
const route = useRoute()
<div style={{ flex: "1", paddingTop: "12px", height: 0 }}>
  <RouterView v-slots={{
      default: ({ Component: RouteComponent }: { Component: any }) => {
          return <Transition name="fade-transform" mode="out-in">
              <div key={route.path}> <RouteComponent /></div>
          </Transition>
      }
  }}
  ></RouterView>
</div>

这时候就好了，虽然是可以了，但是这个any类型让我很是不舒服，本着一定要写代码优雅的原则，最后改动一下

最终代码

<div style={{ flex: "1", paddingTop: "12px", height: 0 }}>
<RouterView v-slots={{
    default:  ({ Component }: { Component: VNode }) => {
        return <Transition name="fade-transform" mode="out-in">
            <div key={route.path} style={{ height: "100%" }}>
                {createVNode(Component)}
            </div>
        </Transition>
    }
}}/>
</div>

这样看着就舒服了

总结

最后想说，TSX真香！走新技术的路上难免会遇到很多坑，但解决了真的很舒服

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue表单实例代码

    Vue表单实例代码

    Vue.js 是用于构建交互式的 Web 界面的库。这篇文章主要介绍了Vue表单实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • 如何修改vue-treeSelect的高度

    如何修改vue-treeSelect的高度

    这篇文章主要介绍了如何修改vue-treeSelect的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue2项目中如何使用clipboard复制插件

    vue2项目中如何使用clipboard复制插件

    这篇文章主要介绍了vue2项目中如何使用clipboard复制插件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue实现目录树结构

    vue实现目录树结构

    这篇文章主要为大家详细介绍了vue实现目录树结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue通过axios调用json地址数据的方法

    Vue通过axios调用json地址数据的方法

    在现代Web开发中,前后端分离已成为标准做法,Vue.js作为前端框架中的佼佼者,提供了丰富的API来处理数据和服务端的交互,其中一个常用的库是axios,本文将详细介绍如何在Vue项目中使用axios来调用JSON数据,需要的朋友可以参考下
    2024-09-09
  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    这篇文章主要介绍了jenkins自动构建发布vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • VantUI封装自定义Tabbar路由跳转的实现

    VantUI封装自定义Tabbar路由跳转的实现

    本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • vuejs 制作背景淡入淡出切换动画的实例

    vuejs 制作背景淡入淡出切换动画的实例

    今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样,本文就来为大家详细讲讲
    2022-07-07

最新评论