一、react-transition-group

  react-transition-group 是原 react 官方维护的动画插件 react-addons-css-transition-group，现在由社区维护。

react-transition-group (opens new window)

这些动画库说白了就是动态的添加/替换/移除已经编写好的 class，这个库可以方便我们实现组件的 入场 和 离场 动画。

npm install react-transition-group --save

关于自定义动画 CSS

classNames={{
  // 开始状态
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 appearDone: 'my-done-appear',

  // 执行动画
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter',

  // 执行结束
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit',
}}

  写一个示例如下：

.my-enter {
  opacity: 0;
}

.my-enter-active {
  opacity: 1;
  transition: opacity 2s ease;
}

1、Transition

  Transitions 是一个过渡动画组件，它仅跟踪组件的“进入”和“退出”状态

略

2、CSSTransition

  CSSTransition 继承了所有的 Transition 功能，还包含与 CSS 过渡配合使用所必需的附加功能（因此组件的名称）

查看文档，还可以看到其还提供了周期函数 onEnter、onEntering、onEntered 等

import { CSSTransition } from 'react-transition-group'

class Demo extends React.PureComponent {
  render() {
    const { isShow, message } = this.state

    return (
      <>
        <button onClick={() => this.changeShow()}>显示/隐藏</button>
        {/* 原生 */}
        {isShow && <h2>{message}</h2>}

        {/* 插件 */}
        <CSSTransition in={isShow} timeout={2000} unmountOnExit={true} classNames="my">
          <h2>{message}</h2>
        </CSSTransition>
      </>
    )
  }
}

3、SwitchTransition

import { CSSTransition, SwitchTransition } from 'react-transition-group'

class Demo extends React.PureComponent {
  render() {
    const { isLogin } = this.state

    return (
      <>
        <button onClick={() => this.changeState()}>切换状态</button>
        {/* 原生 */}
        <button>{isLogin ? '退出' : '登录'}</button>

        {/* 插件 */}
        <SwitchTransition mode="out-in">
          <CSSTransition key={isLogin} timeout={2000} classNames="my">
            <button>{isLogin ? '退出' : '登录'}</button>
          </CSSTransition>
        </SwitchTransition>
      </>
    )
  }
}

4、TransitionGroup

import { CSSTransition, TransitionGroup } from 'react-transition-group'

class Demo extends React.PureComponent {
  render() {
    const { isLogin } = this.state

    return (
      <>
        <h2>书籍列表</h2>
        <TransitionGroup component="ul">
          {books.map((item, index) => {
            return (
              <CSSTransition key={item.id} timeout={2000} classNames="my">
                <li>
                  <span>
                    {item.name}-{item.price}
                  </span>
                  <button onClick={(e) => this.removeBook(item.id)}>删除</button>
                </li>
              </CSSTransition>
            )
          })}
        </TransitionGroup>
        <button onClick={(e) => this.addBook(item.id)}>添加新书籍</button>
      </>
    )
  }
}

二、其他

1、react-motion

react-motion (opens new window)

2、react-spring

react-spring (opens new window)