一、涉及的技术栈
react、react-transition-group、react-router-dom
二、实现思路
1.导入路由使用路由模式包裹根组件
2.引入TransitionGroup, CSSTransition
3.利用useLocation()和路由完成切换动画|
三、根组件代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import {store} from './store/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
);
四、 具体实现代码
import React, { useState, Suspense } from 'react'
import './App.css'
import { useLocation, Route, Routes,Navigate } from 'react-router-dom'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import RenderRoute from './router/routerview'
import {Authrouter} from './router/norouter'
import Login from './components/login/login'
import List from './components/list/list'
import Shujia from './components/shujia/shujia'
function App() {
const useLocationWrapper = () => useLocation()
const location = useLocationWrapper()
const [isPending, setIsPending] = useState(false)
const onEnter = () => setIsPending(true)
const onEntered = () => setIsPending(false)
return (
<div className="App">
<TransitionGroup className="transition-group">
<CSSTransition
key={location.key}
timeout={{ enter: 1500, exit: 1500 }}
classNames="fade"
onEnter={onEnter}
onEntered={onEntered}
>
<div className="router-section">
{/* <RenderRoute location={location}/> */}
<Routes location={location}>
<Route path="/login" element={<Login />} />
<Route path="/list" element={<Authrouter><List /></Authrouter>} />
<Route path="/shujia" element={<Authrouter><Shujia /></Authrouter>} />
</Routes>
</div>
</CSSTransition>
</TransitionGroup>
</div>
);
}
export default App;
注:此路由切换动画不能采用封装的方式否则不会生效
五、css样式
*{
margin: 0;
padding: 0;
}
.App{
width: 100vw;
min-height: 100vh;
}
.transition-group{
position: relative;
}
.fade-enter{
opacity: 0;
transform: rotate(-90deg);
}
.fade-enter-active{
opacity: 1;
transform: rotate(0deg);
transition: opacity 1500ms ease-in-out,transform 1500ms ease-in-out;
}
.fade-exit{
opacity: 1;
transform: rotate(0deg);
}
.fade-exit-active{
opacity: 0;
transform: rotate(0deg);
transition: opacity 1500ms ease-in-out,transform 1500ms ease-in-out;
}
.router-section{
position: absolute;
top: 0;
right: 0;
}