// 使用requestAnimationFrame改变state
import React, { Component } from 'react';

export default class Progress extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      percent: 10
    };
  }

  increase = () => {
    const percent = this.state.percent;
    const targetPercent = percent >= 90 ? 100 : percent + 10;
    const speed = (targetPercent - percent) / 400;
    let start = null;
    const animate = timestamp => {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      const currentProgress = Math.min(parseInt(speed * progress + percent, 10), targetPercent);
      this.setState({
        percent: currentProgress
      });
      if (currentProgress < targetPercent) {
        window.requestAnimationFrame(animate);
      }
    };
    window.requestAnimationFrame(animate);
  }

  decrease = () => {
    const percent = this.state.percent;
    const targetPercent = percent < 10 ? 0 : percent - 10;
    const speed = (percent - targetPercent) / 400;
    let start = null;
    const animate = timestamp => {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      const currentProgress = Math.max(parseInt(percent - speed * progress, 10), targetPercent);
      this.setState({
          percent: currentProgress
        });
      if (currentProgress > targetPercent) {
        window.requestAnimationFrame(animate);
      }
    };
    window.requestAnimationFrame(animate);
  }

  render() {
    const { percent } = this.state;

    return (
      

        
          
            
          

import React, { Component } from 'react';

export default class Progress extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      percent: 10
    };
  }

  increase = () => {
    const percent = this.state.percent + 10;
    this.setState({
      percent: percent > 100 ? 100 : percent,
    })
  }

  decrease = () => {
    const percent = this.state.percent - 10;
    this.setState({
      percent: percent < 0 ? 0 : percent,
    })
  }

  render() {
    // 同上例， 省略
    ....
  }
}

.progress-inner {
 transition: width 400ms cubic-bezier(0.08, 0.82, 0.17, 1);
 // 其他样式同上，省略
 ...
}

import React, { Component } from 'react'; 
import { CSSTransitionGroup } from 'react-transition-group';

let uid = 2; 
export default class Tabs extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      activeId: 1,
      tabData: [{
        id: 1,
        panel: '选项1'
      }, {
        id: 2,
        panel: '选项2'
      }]
    };
  }

  addTab = () => {
    // 添加tab代码
    ...
  }

  deleteTab = (id) => {
    // 删除tab代码
    ...
  }

  render() {
    const { tabData, activeId } = this.state;

    const renderTabs = () => {
      return tabData.map((item, index) => {
        return (
          

            {item.panel}
             this.deleteTab(item.id)}>✕
          
        );
      })
    }

    return (
      

        
          
           {renderTabs()}
          
          +
        
        
          cont
        

/* tab动态增加动画 */
.tabs-wrap-enter {
 opacity: 0.01;
}

.tabs-wrap-enter.tabs-wrap-enter-active {
 opacity: 1;
 transition: all 500ms ease-in;
}

.tabs-wrap-leave {
 opacity: 1;
}

.tabs-wrap-leave.tabs-wrap-leave-active {
 opacity: 0.01;
 transition: all 500ms ease-in;
}

CSSTransitionGroup 可以为其子节点添加额外的 css 类，然后通过 css 动画达到入场和离场动画效果。为了给每个 tab 节点添加动画效果，需要先将它们包裹在 CSSTransitionGroup 组件中。 当设定 transitionName 属性为 'tabs-wrapper' ， transitionEnterTimeout 为400毫秒后，一旦 CSSTransitionGroup 中新增节点，该新增节点会在出现时被添加上 css 类 'tabs-wrapper-enter' ，然后在下一帧时被添加上 css 类 'tabs-wrapper-enter-active' 。由于这两个 css 类中设定了不同的透明度和 css3 transition 属性，所以节点实现了透明度由小到大的入场效果。400毫秒后 css 类 'tabs-wrapper-enter' 和 'tabs-wrapper-enter-active' 将会同时被移除，节点完成整个入场动画过程。离场动画的实现类似于入场动画，只不过被添加的 css 类名为 'tabs-wrapper-leave' 和 'tabs-wrapper-leave-active' 。该示例效果如下图所示：

CSSTransitionGroup 支持以下7个属性：

其中，入场和离场动画是默认开启的，使用时需要设置 transitionEnterTimeout 和 transitionLeaveTimeout 。值得注意的是， CSSTransitionGroup 还提供出现动画（appear），使用时需要设置 transitionAppearTimeout 。那么，出现动画和入场动画有什么区别呢？当设定 transitionAppear 为 true 时， CSSTransitionGroup 在 初次渲染时，会添加一个出现阶段。在该阶段中， CSSTransitionGroup 的已有子节点都会被相继添加 css 类 'tabs-wrapper-appear' 和 'tabs-wrapper-appear-active' ，实现出现动画效果。因此， 出现动画仅适用于 CSSTransitionGroup 在初次渲染时就存在的子节点 ，一旦 CSSTransitionGroup 完成渲染，其子节点就只可能有入场动画（enter），不可能有出现动画（appear）。

此外，使用 CSSTransitionGroup 需要注意以下几点：

1. CSSTransitionGroup 默认在 DOM 树中生成一个 span 标签包裹其子节点，如果想要使用其他 html 标签，可设定 CSSTransitionGroup 的 component 属性；

2. CSSTransitionGroup 的子元素必须添加 key 值才会在节点发生变化时，准确地计算出哪些节点需要添加入场动画，哪些节点需要添加离场动画；

3. CSSTransitionGroup 的动画效果只作用于直接子节点，不作用于其孙子节点；

4. 动画的结束时间不以 css 中 transition-duration 为准，而是以 transitionEnterTimeout ， transitionLeaveTimeout ， TransitionAppearTimeout 为准，因为某些情况下 transitionend 事件不会被触发，详见 MDN transitionend 。

CSSTransitionGroup 实现动画的优点是：

1. 简单易用，可以方便快捷地实现元素的入场和离场动画；

2. 与 React 结合，性能比较好。

CSSTransitionGroup 缺点也十分明显：

1. 局限于出现动画，入场动画和离场动画；

2. 由于需要制定 transitionName ，灵活性不够；

3. 只能依靠 css 实现简单的动画。

四、结合 hook 实现复杂动画

在实际项目中，可能需要一些更炫酷的动画效果，这些效果仅依赖于 css3 往往较难实现。此时，我们不妨借助一些成熟的第三方库，如 jQuery 或 GASP，结合 React 组件中的生命周期钩子方法 hook 函数，实现复杂动画效果。除了 React 组件正常的生命周期外， CSSTransitionGroup 的底层 api TransitonGroup 还为其子元素额外提供了一系列特殊的生命周期 hook 函数，在这些 hook 函数中结合第三方动画库可以实现丰富的入场、离场动画效果。

TransisitonGroup 分别提供一下六个生命周期 hook 函数：

1. componentWillAppear(callback)

2. componentDidAppear()

3. componentWillEnter(callback)

4. componentDidEnter()

5. componentWillLeave(callback)

6. componentDidLeave()

它们的触发时机如图所示：

示例

GASP 是一个 flash 时代发展至今的动画库，借鉴视频帧的概念，特别适合做长时间的序列动画效果。本文中，我们用 TransitonGroup 和 react-gsap-enhancer （一个可以将 GSAP 应用于 React 的增强库）完成一个图片画廊，代码如下：

import React, { Component } from 'react'; 
import { TransitionGroup } from 'react-transition-group'; 
import GSAP from 'react-gsap-enhancer' 
import { TimelineMax, Back, Sine } from 'gsap';

class Photo extends Component { 
  constructor(props) {
    super(props);
  }

  componentWillEnter(callback) {
    this.addAnimation(this.enterAnim, {callback: callback})
  }

  componentWillLeave(callback) {
    this.addAnimation(this.leaveAnim, {callback: callback})
  }

  enterAnim = (utils) => {
    const { id } = this.props;
    return new TimelineMax()
      .from(utils.target, 1, {
        x: `+=${( 4 - id ) * 60}px`,
        autoAlpha: 0,
        onComplete: utils.options.callback,
      }, id * 0.7);
  }

  leaveAnim = (utils) => {
    const { id } = this.props;
    return new TimelineMax()
      .to(utils.target, 0.5, {
        scale: 0,
        ease: Sine.easeOut,
        onComplete: utils.options.callback,
      }, (4 - id) * 0.7);
  }

  render() {
    const { url } = this.props;
    return (