react-router動畫切換

 我挺訝異vue-router原生支援的動畫換頁效果，在react-router6竟然沒有支援，官網老實說也寫得不是很清楚，畢竟這版本目前來說還很新，也沒有別人寫好的套件可以直接使用，只好上網爬文怎麼實現

基本上就是參考了這個網站（https://dev.to/fazliddin04/react-router-v6-animated-transitions-diy-3e6l）把最終效果實踐出來

正文開始

// src/style/route-animate.module.scss

.fadeIn {

animation: 0.4s fadeIn forwards;

}

.fadeOut {

animation: 0.2s fadeOut forwards;

}

@keyframes fadeIn {

from {

opacity: 0.6;

transform: translate(-3rem, 0px);

}

to {

opacity: 1;

transform: translate(0px, 0px);

}

}

@keyframes fadeOut {

from {

opacity: 1;

transform: translate(0px, 0px);

}

to {

opacity: 0;

transform: translate(-3rem, 0px);

}

}

// src/App.jsx

import route_styles from "./style/route-animate.module.scss"

......

const RoutesWithAnimate = () => {

const animateEnum = {

fadeIn: "fadeIn",

fadeOut: "fadeOut",

}

const location = useLocation()

const [displayLocation, setDisplayLocation] = useState(location)

const [transitionStage, setTransistionStage] = useState(animateEnum.fadeIn)

useEffect(() => {

    // 防止有變化query的頁面但route沒有變化

if (location.pathname !== displayLocation.pathname) {

setTransistionStage(animateEnum.fadeOut)

} else if (location !== displayLocation) {

setDisplayLocation(location)

}

}, [location, displayLocation])

return (

<div

className={classNames("min-h-full", route_styles[transitionStage])}

onAnimationEnd={() => {

if (transitionStage === animateEnum.fadeOut) {

setTransistionStage(animateEnum.fadeIn)

setDisplayLocation(location)

}

}}

>

<Routes location={displayLocation}>

<Route path={"/home"} element={<Home />} />

        <Route path={"/about"} element={<About />} />

<Route path="*" element={<Navigate to="/home" replace />} />

</Routes>

</div>

)

}

藉由把location暫存放入Routes裡面，利用時間差做到動畫效果，但終究沒辦法同時存在兩個location，所以沒辦法做到同時兩個route畫面出現在畫面上的效果，類似輪動這樣，這可能需要靠htmlToCanvas達成類似的效果或是等其他人出套件了，總之專案做到這裡就被打掉了....沒錯你沒看錯，被打掉了，因為有人覺得淡入淡出很醜，好吧就這樣吧，做個紀錄，紀錄自己曾經做過。

踩過的小坑
if (location !== displayLocation)

參考的網站判斷原來長這樣，但是這會造成一個問題，如果只是query切換沒有切換pathname，然後畫面中假設彈窗顯示，然後彈窗會去取query的值，這時因為Routes的location還沒有轉換，所以取到的query會是舊的。

例如
router變化：/home?id=1 => /home?id=2
希望達成效果：/home?id=1 => 開始淡出 => 彈窗抓取qeury: id = 2 => 開始淡入
實際執行狀況：/home?id=1 => 開始淡出 => 彈窗抓取qeury: id = 1 => 淡出跑完(setDisplayLocation) => /home?id=2 => 開始淡入 => 淡入跑完

先不要管為什麼系統這樣設計，總之～就是這樣拉～