react-transition-group react全局添

在封装的路由表里 把<e.component routes={e.children} {...router}></e.component>包裹

下载的依赖
import { TransitionGroup, CSSTransition } from "react-transition-group";

<TransitionGroup>
                            <CSSTransition
                                appear={true} // 如果this.state.show从false变为true，则动画入场，反之out出场
                                timeout={1000} //动画执行1秒
                                classNames='fade' //自定义的class名
                            >
                                <e.component routes={e.children} {...router}></e.component>
                            </CSSTransition>
                        </TransitionGroup>

<!--添加的css样式  全局引入  index.js-->
.fade-appear {
  opacity: 0;
  transform: scale(0);
}

.fade-appear.fade-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: 500ms ease-out;
}

不懂的可以留言咨询