react路由动画切换

1.react过渡效果

1.1 在react项目中下载安装过渡动画模块

cnpm install react-transition-group --save

1.2 在需要执行过渡的组件中导入动画模块

import { CSSTransition } from 'react-transition-group'  // 导入css动画的组件模块

1.3 在需要过渡的标签外层添加CSSTranstion组件

<CSSTransition in={bool} timeout={2000} classNames="animate">
  <h1>这是动态显示的标签或组件</h1>
</CSSTransition>

使用动画的写法 CSSTransition 需要设置三个属性：

• in: 控制子元素显示隐藏的条件，一般是bool值或表达式

• timeout: 入场或出场动画的时间，单位默认毫秒

• className： 入场或出场class属性名前缀

1.4 在组建的css中通过class设置入场和出场动画

有两个过程，总共六个样式：

.animate-enter .animate-enter-active .animate-enter-done

.animate-exit .animate-exit-active .animate-exit-done

/* 入场动画过程 */
.animate-enter{
   
  opacity: 0;
  transform: translateY(300px);
}
.animate-enter-active{
   
  transition