最近在用 React + Ant Design 搭建一个后台管理的模板，想着之前用 vue 的时候，在路由切换时都增加了一个动效，用 React 能不能也增加一个类似的动效呢？
说干就干，然而，令人犯难的是，vue 是自带 Transition 组件，所以加动效很方便，React 就需要自己手动实现了。
第一念头，当然是看看有没有成熟的插件来帮助实现，搜了下，网上都是说使用 react-transition-group 这个插件来实现，我也照着实现了一下，发现有 bug，切换的动效时灵时不灵的，有时候会报错，刷新一下又莫名的好了，而且控制台也报错。
挣扎了一下，于是放弃了使用这个插件，于是，想着能不能不用插件来实现呢，在折腾一番之后，终于实现效果了，特此记录下。

1、创建一个组件来实现动画

import './PageTransition.css'

const PageTransition = ({ children }: { children: React.ReactNode }) => {
  const [displayChildren, setDisplayChildren] = useState(children);
  const [transitionStage, setTransitionStage] = useState('slideIn');
  const location = useLocation();

  useEffect(() => {
    setTransitionStage('slideOut');
  }, [location]);

  useEffect(() => {
    if (transitionStage === 'slideOut') {
      setTimeout(() => {
        setDisplayChildren(children);
        setTransitionStage('slideIn');
      }, 300); // 动画持续时间
    }
  }, [transitionStage, children]);

  return (
    <div className={`page ${transitionStage}`}>
      {displayChildren}
    </div>
  );
};

export default PageTransition;

PageTransition.css 样式代码

.page {
  transition: all 0.3s ease-in-out;
}

.slideIn {
  opacity: 1;
  transform: translateX(0);
}

.slideOut {
  opacity: 0;
  transform: translateX(-200px);
}

2、在需要使用动效的地方用这个组件将其包裹起来。对于后台管理而言，当然是使用该组件将 Outlet 元素包裹起来

import PageTransition from '@/components/PageTransition'

<PageTransition><Outlet/></PageTransition>

至此，一个粗糙的路由切换动效就已经形成了，可以根据自己需要修改 css 里的样式以实现不同的动效