react-transition-group中文指南

• Transtion 组件
  • 基本示例
  • props
    • children
    • in
    • mountOnEnter
    • unmountOnExit
    • appear
    • enter
    • exit
    • timeout
    • addEndListener
    • onEnter
    • onEntering *
    • onEntered
    • onExit
    • onExiting
    • onExited
• CSSTransition
  • 各阶段的名词解释及包含类名
  • props
    • classNames
• TransitionGroup
  • 通过css动画非常简单的实现列表过渡
  • props
    • component
    • children
    • appear
    • enter
    • exit
    • childFactory

react-transition-group与其他react动画框架相比优势还是比较明显的，体积非常小，gzip之后只有5k不到、只提供动画状态，具体的动画实现完全由自己掌控，对于业务开发这点是很重要的，在只需要一些基础的页面、组件基础动效时直接用js和css实现，涉及一些交互效果比较多的页面时可以通过提供的钩子很好的接入TweenMax这样的动画库，可以说是非常有弹性了。

1. ‘entering’ -> 进场动画正在进行
2. ‘entered’ -> 进场动画执行完成
3. ‘exiting’ -> 离场动画正在进行
4. ‘exited’ -> 离场动画完成

Transtion 组件

对于于基本的转换效果，使用transtion已经足够

基本示例

import {
    CSSTransition } from 'react-transition-group'
const duration = 300

const defaultStyle = {
   
  transition: `opacity ${
     duration