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