react配置路由动画

react 中配置路由动画。

1.先创建react项目 create-react-app

create-react-app 项目名称

2.下载插件react-transition-group

npm i react-transition-group

3.在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%);
  }
  

3.在App.js中配置

import './App.css';
import router from './router';//路由表
import { useRoutes } from 'react-router-dom'
import React from 'react'
import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
export default function App(props) {
  return (
    <div>
      <TransitionGroup className='transition_wrapper' style={{ width: "100%", height: "100%" }}>
        <CSSTransition key={useLocation().pathname} unmountOnExit timeout={2000} classNames='animate'>
          {
            useRoutes(router)
          }
        </CSSTransition>
      </TransitionGroup>
    </div>
  )
}