关于React的动画ReactCSSTransitionGroup(案例分析)

@ckinmind 2017-01-14 09:16:16发表于 ckinmind/ReactCollect

案例:在线地址:codepen.io

const App = ({ children, location }) => (
  <div className="app">
    <Navbar />
    <ReactCSSTransitionGroup
      component="div"
      transitionName="page"
      transitionEnterTimeout={700}
      transitionLeaveTimeout={700}
    >
      {React.cloneElement(children, {
        key: location.pathname
      })}
    </ReactCSSTransitionGroup>
  </div>
);

scss

.page-enter {
  transform: translateY(100%);
}

.page-enter.page-enter-active {
  transform: translateY(0%);
}

.page-leave {
  transform: translateY(0%);
  transition: 
    transform .7s cubic-bezier(
      0.680, 
      -0.550, 
      0.265, 
      3
  );
}

.page-leave.page-leave-active {
  transform: translateY(-100%);
}

几大问题:

  1. App这个组件是个函数式组件,里面的{ children, location }是什么意思
  2. ReactCSSTransitionGroup中各参数的意义
  3. 为什么要用React.cloneElement,和里面的key, 以及location.pathname