React路由动画

js

//useLocation获取当前url location对象
//useRoutes
import { useLocation, useRoutes } from 'react-router-dom'
//动画效果
import { CSSTransition, TransitionGroup } from 'react-transition-group'
//引入路由列表
import routerList from './router'
import './App.css'

function App() {
  let location = useLocation();
  let router = useRoutes(routerList, location);
  return (
    <div className="App">
      <TransitionGroup >
        <CSSTransition key={location.key} timeout={1000} classNames="fds">
          {router}
        </CSSTransition>
      </TransitionGroup>
      {/* </Suspense> */}
    </div>
  );
}

export default App;

css

/*平移*/
/* 将要进入的页面从无到有，经过0.8s从右侧以渐变形式移动到可视页 */
.fds-enter{
  opacity: 0;
  transform: translate(100%,0);
}
.fds-enter-active{
  opacity: 1;
  transform: translate(0,0);
  transition: 800ms ease-out;
}
/* 讲要移走的页面设置为透明，从中间移动到左侧 */
.fds-exit{
  opacity: 0;
  transform: translate(0,0);
}
.fds-exit-active{
  opacity: 0;
  transform: translate(-100%,0);
}



/* 缩放 */
/* 设置进场过程中 透明度为1，放缩为1，放缩的位置为左上角，持续时间为500ms，时间曲是ease-out */
.fds-enter{
  opacity: 1;
}
.fds-enter-active{
  opacity: 1;
  transform: scale(1);
  transform-origin: top left ;
  transition: 800ms ease-out;
}
/* 设置退场前透明度为1，放缩为1 */
.fds-exit{
  opacity: 1;
  transform: scale(1);
}
/* 设置退场过程中，透明度为0，放缩为0，放缩的位置默认是中间，所以不设置也可以
   设置为右下为收缩位置，持续时间为500ms，时间曲是ease-out */
.fds-exit-active{
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom right;
  transition: 500ms ease-out;
}



/* 旋转翻页 */
/* 设置进场过程中，透明度为1，Y轴三维旋转一周(360deg)，时序时间为500ms，时间曲是ease-out */
.fds-enter{
  opacity: 1;
  transform: rotateY(0deg);
}
.fds-enter-active{
  opacity: 1;
  transform: rotateY(360deg);
  transition: 800ms ease-out;
}
/* 设置退场前透明度为1->0，Y轴三维旋转一周(360deg) */
.fds-exit{
  opacity: 1;
  transform: rotateY(360deg);
}
.fds-exit-active{
  opacity: 0;
  transform: rotateY(0deg);
  transition: 500ms ease-out;
}



/* 360普通旋转 */
.fds-enter{
  opacity: 1;
  transform: rotate(0deg);
}
.fds-enter-active{
  opacity: 1;
  transform: rotate(360deg);
  transition: 800ms ease-out;
}
.fds-exit{
  opacity: 1;
  transform: rotate(360deg);
}
.fds-exit-active{
  opacity: 0;
  transform: rotate(0deg);
  transition: 500ms ease-out;
}