import React, { useState, useEffect } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history as Router, withRouter } from 'umi'
import { Switch } from 'react-router'
import './index.less'
const routerType = {
   'POP': 'back',
   'PUSH': 'in',
   'REPLACE': 'in'
}
export default withRouter(({ location, children, history }) => {
   return (
      <TransitionGroup style={{ height: '100%' }} className='transition_wrapper' childFactory={(child) => (
         React.cloneElement(child, { classNames: routerType[history.action] })
      )}>
         <CSSTransition key={location.pathname} appear timeout={3000}>
            <Switch location={location}>{(children as any)?.props?.children}</Switch>
         </CSSTransition>
      </TransitionGroup>
   )
})

.in-enter-active{  // 入场的过渡状态类
    transition: all 3s;
    transform: translate(0, 0)!important;
  }
  .in-enter-done { // 入场的动画的结束状态类
      // opacity: 0.5;
      transform: translate(0, 0) !important;
  }
  .in-enter {  // 入场的动画开始状态类
    z-index: 5 !important;
    transform: translate(100%, 0);
  }
  .in-exit-active {    // 离场动画
      opacity:0;
      transition: all 3s;
      transform: translate(-100%, 0)!important;
  }
  .in-exit {  // 离场动画开始
      // transform: translate(0, 0)!important;
  }
  .in-exit-done { // 离场动画结束
  }
  // 返回动画
  .back-enter-active{  // 入场的过渡状态类
      transition: all 3s;
      transform: translate(0, 0)!important;
    }
  .back-enter-done { // 入场的动画的结束状态类
      // opacity: 0.5;
      transform: translate(0, 0) !important;
  }
  .back-enter {  // 入场的动画开始状态类
      z-index: 5 !important;
      transform: translate(-100%, 0);
  }
  .back-exit-active {    // 离场动画
      opacity:0;
      transition: all 3s;
      transform: translate(100%, 0)!important;
  }
  .back-exit {  // 离场动画开始
      // transform: translate(0, 0)!important;
  }
  .back-exit-done { // 离场动画结束
  }