单页应用流行起来之后，不用再刷新页面，用户体验好了很多。我们从一个页面跳转到另外一个页面，只要一点就过去了。但是这个动作久了之后，就会觉得点一下就跳过去了，显得很突兀，人们又开始不满足了，又脑洞大开，提了一些需求让程序员要去造造造...😂毕竟，给人家一个绚丽的动画，人家也有心情多点几下嘛😂

react-transition-group

react官方的动画库，提供四个组件。这四个组件都不做任何展示，只是通过跟踪组件的加载卸载，对我们暴露了api，在对应的时间点加上对应的动画类，就可以实现路由跳转的动画（当然不只是路由）。

我这里看上了CSSTransition。

import "animate.css"
import { CSSTransition } from 'react-transition-group'
export default function TransitionRoute({component: Component, ...rest}) {
  return (
    <Route {...rest}>
      {props => {
        return <CSSTransition
          in={props.match ? true : false}
          timeout={1000}
          classNames={{
            enter: "animated fast bounceInRight",
            exit: "animated fast bounceOutRight"
          }}
          mountOnEnter
          unmountOnExit
        >
          <Component {...props}></Component>
        </CSSTransition>
      }}
    </Route>
  )
}

这里返回一个 Route。在此组件中将Component属性解构出来，用于后面渲染，剩下的属性（比如至少还有 path）传递给 Route，才能保持Route的正常功能。
然后不给 Route=> component 属性，我们在 Route 标签内部传递一个函数（js中函数意味着无限的可能😁，而且设置了函数之后，标签中的component属性会失效，所以不设置component），这个函数默认接收参数是整个路由信息。
将 component 放在 CSSTransition 里面渲染，别忘了把路由信息给component，不然组件里面有关路由的操作因为找不到路由信息报错。 CSSTransition 提供了很多 API 去设置过渡细节（如代码所示）。

需要引入 animate.css 。classNames 处设置的都是此样式库里面的类。建议根据自己需要的动画效果去这个文件里面复制出来，单独见一个文件，避免不必要的代码打包。

react-router 让路由切换动起来

react-router 让路由切换动起来

react-transition-group

推荐阅读更多精彩内容