Vue3+Tsx給路由加切換動(dòng)畫(huà)時(shí)的踩坑及解決

更新時(shí)間：2023年01月21日 08:47:00 作者：頭發(fā)掉完就不學(xué)了

這篇文章主要介紹了Vue3+Tsx給路由加切換動(dòng)畫(huà)時(shí)的踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

項(xiàng)目場(chǎng)景

用最新的技術(shù)棧Vue+Tsx給后臺(tái)管理系統(tǒng)路由加動(dòng)畫(huà)時(shí)，語(yǔ)法上與模板語(yǔ)法有些許不同，記錄下自己的踩坑記錄

樣式文件

新建文件transition.scss，這里用的是若依框架人家寫(xiě)好的樣式，寫(xiě)好之后在全局引入該樣式文件

// 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;
}

步驟

首先是第一步嘗試給路由加過(guò)渡動(dòng)畫(huà)，代碼如下

<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>

這時(shí)候路由完全沒(méi)動(dòng)畫(huà)并且報(bào)了一個(gè)警告

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

意思是在Transition動(dòng)畫(huà)節(jié)點(diǎn)下只能有一個(gè)根節(jié)點(diǎn)，這時(shí)候再?lài)L試把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>

這時(shí)候還是沒(méi)有切換動(dòng)畫(huà)的，新警告來(lái)了

<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>

意思是說(shuō)router-view不能放在transition下，好的那我們換一種寫(xiě)法試試

<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>

這時(shí)候就很完美，沒(méi)警告了。但是？？王德發(fā)？？切換動(dòng)效在哪里？？我陷入了沉思，官方文檔里給的示例是切換顯示隱藏的時(shí)候用v-if，也就是隱藏的時(shí)候dom節(jié)點(diǎn)被銷(xiāo)毀了，是不是我這個(gè)沒(méi)重新渲染呢？？這時(shí)候給div加上一個(gè)動(dòng)態(tài)的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>

這時(shí)候就好了，雖然是可以了，但是這個(gè)any類(lèi)型讓我很是不舒服，本著一定要寫(xiě)代碼優(yōu)雅的原則，最后改動(dòng)一下

最終代碼

<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>

這樣看著就舒服了