Vue3+Tsx給路由加切換動畫時的踩坑及解決

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

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

項目場景

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

樣式文件

新建文件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動畫節(jié)點下只能有一個根節(jié)點，這時候再嘗試把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>

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

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

最終代碼

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

這樣看著就舒服了