单页应用流行起来之后，不用再刷新页面，用户体验好了很多。我们从一个页面跳转到另外一个页面，只要一点就过去了。 但是这个动作久了之后，就会觉得点一下就跳过去了，显得很突兀，人们又开始不满足了，又脑洞大开，提了一些需求让程序员要去造造造...😂毕竟，给人家一个绚丽的动画， 人家也有心情多点几下嘛😂
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 处设置的都是此样式库里面的类。建议根据自己需要的动画效果去这个文件里面复制出来，单独见一个文件，避免不必要的代码打包。
(不作为教程，前端知识冗杂，仅供自己备忘)
