react实现路由切换动画效果

先看效果图

首先安装一下插件

yarn add react-transition-group


把你需要有动画效果的页面用CSSTransition包裹起来

import { CSSTransition } from &＃39;react-transition-group&＃39;;
import { RouteComponentProps } from &＃39;react-router-dom&＃39;;const Album: FC<RouteComponentProps> &＃61; ({history
}): ReactElement &＃61;> {const [show, setShow] &＃61; useState<boolean>(true);/*** 返回上一个路由*/const handleClickBack &＃61; useCallback((): void &＃61;> {setShow(false);}, []);return (<CSSTransitionin&＃61;{show}timeout&＃61;{300}appear&＃61;{true}classNames&＃61;"fly"unmountOnExitonExited&＃61;{history.goBack}><a onClick&＃61;{handleClickBack}>返回</a></CSSTransition>)
}


用<CSSTransition>标签包裹需要设置动画的标签1.in : 绑定控制动画效果切换的属性 this.state.show的值在true和false之间切换来控制动画效果2.timeout: 动画持续的时间3.classNames : 动画的class名 与.css中样式类名一致4.unmountOnExit : 动画出场即fade-exit-done样式效果结束后 直接将标签移除掉&＃xff08;若没有该属性 只是不显示标签 标签的位置任然占有&＃xff09;5.onExited : 钩子函数 还有很多不同时刻的钩子函数 6.appear &＃xff1a; 值为true时 第一次显示标签是也有动画效果 需要在.css文件中设置相关样式


具体查看官网文档