react过渡动画

一、react过渡效果

1, 在react工程中下载安装过渡动画模块
    cnpm install react-transition-group --save
2, 在需要执行过渡的组件中导入动画模块
    import { CSSTransition } from "react-transition-group"
3, 在需要过渡的标签外层添加CSSTranstion组件
    <CSSTransition in={bool} timeout={2000}  classNames="luozhixiang">
        <div></div> 
    </CSSTransition>
4, 在组建的css中通过class设置入场和出场动画
    .luozhixiang-enter   .luozhixiang-enter-active    .luozhixiang-enter-done
    .luozhixiang-exit      .luozhixiang-exit-active    .luozhixiang-exit-done

注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒
      2, 需要在index.js中关闭严格模式, 删除   <React.StrictMode>
      3, enter-active和exit-active中要写过渡结束状态才有效

二、react路由切换动画

1, 在react工程中下载安装过渡动画模块
    npm install react-transition-group --save

2, 在路由配置文件/src/router/index.js中导入动画组件
    import { TransitionGroup, CSSTransition } from "react-transition-group"
 
3, 在路由组件模板中,用动画组件包裹路由组件
    <TransitionGroup>
        <CSSTransition timeout={2000} classNames="wuyifan" unmountOnExit key={props.location.pathname}>
            <Switch location={props.location}>
                <Route exact path="/user" component={User} />
            </Switch>
        </CSSTransition>
    </TransitionGroup >
    注意: CSSTransition组件的key属性要保证唯一性,所以用location.pathname 
          Switch 组件要设置location属性为路由信息的props.location, 保证路由跳转组件的key和CSSTransition的key一致

4, 路由组件中没有路由信息location.pathname, 需要使用withRouter导入
    import { withRouter } from "react-router-dom"
    export default withRouter(MyRouter)

5, 在组件的css文件中写路由切换动画过程
/* 入场动画过程 */
.wuyifan-enter{
  transform: translateX(200px)
}
.wuyifan-enter-active{
  transition: 2s;
  transform: translateX(0px)
}
.wuyifan-enter-done{
  transform: translateX(0px)
}
/* 出场动画过程 */
.wuyifan-exit{
  transform: translateX(0px)
}
.wuyifan-exit-active{
  transition: 2s;
  transform: translateX(200px)
}
.wuyifan-exit-done{
  transform: translateX(200px)
}

.home, .user, .login, .animate{
  position: absolute;
  left: calc(50% - 200px)
}