您的位置:首页 > 教程 > JavaScript > Vue3+Tsx给路由加切换动画时的踩坑及解决

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

2023-01-21 09:37:44 来源:易采站长站 作者:

目录项目场景样式文件步骤最终代码总结项目场景用最新的技术栈Vue+Tsx给后台管理系统路由加动画时,语法上与模板语法有些许不同,记录下自己的踩坑记录样式文件新建文件transition.scss,这里...

目录
项目场景
样式文件
步骤
最终代码
总结

项目场景

用最新的技术栈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 }}&phpgt;
<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真香!走新技术的路上难免会遇到很多坑,但解决了真的很舒服

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25