react-router4使用代码分割后ReactCssTransitionGroup的enter没有被添加上

Question

react-router4使用代码分割后ReactCssTransitionGroup的enter没有被添加上但是leave过渡效果是有的，这是什么原因？

过渡组件SlideTransition

  .slide-enter {
    transform: translate3d(100%, 0, 0);
  }
  .slide-enter.slide-enter-active {
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .slide-leave {
    transform: translate3d(0, 0, 0);
  }
  .slide-leave.slide-leave-active {
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
export default ({ children }) => (
    <ReactCssTransitionGroup
        transitionName="slide"
        transitionEnterTimeout={600}
        transitionLeaveTimeout={600}>
        {children}
    </ReactCssTransitionGroup>
)

bundle组件

export default function ayncComponent(importFun) {
    return class AsyncComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = { component: null };
        }
        async componentDidMount() {
            const {default: component} = await importFun();
            this.setState({ component });
        }
        render() {
            const C = this.state.component;
            return C ? <C {...this.props} /> : null;
        }
    }
}

页面组件

 <SlideTransition>
    <Switch location={this.props.loacation} key={this.props.location.key}>
        {
            this.props.routes.map((route, i) => <RouteWidthSubRoutes {...route} key={i}/>)
        }
    </Switch>
</SlideTransition>

代码结构差不多是这样子， 使用完代码分割后 .slide-enter 和 .slide-enter.slide-enter-active并没有被添加到组件上去 但是 leave 却可以被添加上去并有离场动画效果。。
不知道原因是什么。。