react实现路由动画

下载依赖：

yarn  add react-transition-group

在入口文件中进行包裹：

import { useRoutes,useLocation } from 'react-router-dom';
import routerMap from './router';
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './App.css'

function App() {
  let element = useRoutes(routerMap)
  return (
    <div className="App">
      <TransitionGroup style={{ width: "100%", height: "100%" }}>
        // unmountOnExit   用于控制路由组件在退出动画播放完成后是否从 DOM 中卸载。
        <CSSTransition key={useLocation().pathname} unmountOnExit timeout={2000} classNames='animate'>
          {
            element
          }
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}

export default App;

css代码：

/* 入场动画过程 */
.animate-enter {
  opacity: 0;
  transform: translateX(100%);
}

.animate-enter-active {
  transition: 2s;
  opacity: 1;
  transform: translateX(0px);
}

.animate-enter-done {
  opacity: 1;
  transform: translateX(0px);
}

/* 出场动画过程 */
.animate-exit {
  opacity: 1;
  transform: translateX(0);
}

.animate-exit-active {
  transition: 0s;
  opacity: 0;
  transform: translateX(-100%);
}

.animate-exit-done {
  opacity: 0;
  transform: translateX(-100%);
}

效果展示

路由动画效果