React 路由跳转动画

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <BrowserRouter>
    <App />
    </BrowserRouter>

);

reportWebVitals();

App.js

import React, { useState } from 'react'
import './App.css'
import { useLocation, Route, Routes, Navigate,BrowserRouter } from 'react-router-dom'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import Home from './routers/home'
import Login from './routers/login'


function App() {
  const useLocationWrapper = () => useLocation()
  const location = useLocationWrapper()

  return (
    <div className="App">
      <TransitionGroup className="transition-group">
        <CSSTransition
          key={location.key}
          timeout={{ enter: 1500, exit: 1500 }}
          classNames="fade"
        
        >
          <div className="router-section">
          
            <Routes location={location}>
              <Route path="/login" element={<Login />} />
              <Route path="/home" element={<Home />} />

            </Routes>
          </div>
        </CSSTransition>
      </TransitionGroup>

    </div>
  );
}

export default App;

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