[JavaScript知识库]react实现路由切换动画效果

先看效果图

首先安装一下插件

yarn add  react-transition-group

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

import { CSSTransition } from 'react-transition-group';
import { RouteComponentProps } from 'react-router-dom';

const Album: FC<RouteComponentProps> = ({
  history
}): ReactElement => {
  const [show, setShow] = useState<boolean>(true);
    /**
   * 返回上一个路由
   */
  const handleClickBack = useCallback((): void => {
    setShow(false);
  }, []);
    return (
    <CSSTransition
      in={show}
      timeout={300}
      appear={true}
      classNames="fly"
      unmountOnExit
      onExited={history.goBack}
    >
    <a onClick={handleClickBack}>返回</a>
    </CSSTransition>
    )
}

用<CSSTransition>标签包裹需要设置动画的标签

1.in : 绑定控制动画效果切换的属性 this.state.show的值在true和false之间切换来控制动画效果

2.timeout: 动画持续的时间

3.classNames : 动画的class名 与.css中样式类名一致

4.unmountOnExit : 动画出场即fade-exit-done样式效果结束后 直接将标签移除掉（若没有该属性 只是不显示标签 标签的位置任然占有）

5.onExited : 钩子函数 还有很多不同时刻的钩子函数 

6.appear ： 值为true时 第一次显示标签是也有动画效果 需要在.css文件中设置相关样式

具体查看官网文档