react提供了一个过渡动画组件 react-addons-css-transition-group ，然而项目需要兼容 ie8 浏览器，最后决定使用 jquery+react-addons-transition-group 实现过渡效果。

要实现过渡效果的是一个幻灯片组件，组件代码如下：

let ReactTransitionGroup = require('react-addons-transition-group');
//主体
class Slider extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      //当前幻灯数组下标
      curIndex:0
    }
  }

  //组件挂载成功后触发定时切换幻灯
  componentDidMount() {
    this.slideInterval = setInterval(
      () => {
        let nextCurIndex = this.state.curIndex === (this.props.slides.length - 1) ? 0 : this.state.curIndex+1;
        this.setState({curIndex:nextCurIndex});
      },5000
    );
  }

  render() {
    //幻灯图数组
    const slides = this.props.slides;
    
    //当前展示的图片
    const curIndex = this.state.curIndex;
    const curSlide = slides[curIndex];
    
    return (
      <div >
        <ReactTransitionGroup component="div">
          <SliderImg key={curSlide.id} litpic={curSlide.litpic} name={curSlide.name} title={curSlide.title} id={curSlide.id}/>
        </ReactTransitionGroup>
      </div>
    );
  }
}

可以看到图片部分使用了 <ReactTransitionGroup>包裹，该组件会自动调用子组件的一些方法，你可以在这些方法里调用jquery的动画处理方法。

注意，一定要给子组件加上key，引用官网文档原文说明：

你必须为ReactCSSTransitionGroup的所有子级提供 key 属性，即使只渲染一个项目。这就是React将决定哪一个子级进入，离开，或者停留

再看一下 <SlideImg> 组件的定义

class SliderImg extends React.Component {
  //ReactTransitionGroup初始子组件挂载后会触发，之后更新进来的子组件不会触发
  //callback是ReactTransitionGroup传过来的，用于结束动画流程
  componentWillAppear(callback) {
    this.fadeInOut(callback)
  }
 //和上面的相反，初始的那个子组件不会触发该方法，其他的会触发
  componentWillEnter(callback) {
    this.fadeInOut(callback)
  }

  //淡入淡出效果 总时间需要和Slide组件轮播间隔差不多
  fadeInOut(callback) {
    //获取dom对象，通过ref设置的
    let dom = this.el;
    //首先淡入，用时1秒，之后创建一个定时器，3秒后再执行淡出动画，最后调用 callback
    $(dom).fadeIn(1000,() => {
      setTimeout(()=>{
        //稍微延长淡出效果，过渡更加自然
        $(dom).fadeOut(1500,()=>callback());
      },3000)
    });
  }
  
  render() {
    const props = this.props;
    return (
      <a href="javascript:" className="banner_item"  key={props.id} ref={(el)=>{this.el = el}} style={{display:'none'}}>
        <div className="tupian">
          <img src={props.litpic} />
        </div>
        <span>{props.name}</span>
        <i>{props.title}</i>
      </a>
    );
  }
}

这样就完成了。

备注：

ReactTransitionGroup是动画的基础。它通过 require('react-addons-transition-group') 访问。当子级被声明式的从其中添加或移除（就像上面的例子）时，特殊的生命周期挂钩会在它们上面被调用。

componentWillAppear(callback)

对于被初始化挂载到 TransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它只会在 TransitionGroup 初始化渲染时被调用。

componentDidAppear()

在 传给componentWillAppear 的 回调 函数被调用后调用。

componentWillEnter(callback)

对于被添加到已存在的 TransitionGroup 的组件，它和 componentDidMount() 在相同时间被调用 。它将会阻塞其它动画发生，直到callback被调用。它不会在 TransitionGroup 初始化渲染时被调用。

componentDidEnter()

在传给 componentWillEnter 的回调函数被调用之后调用。

componentWillLeave(callback)

在子级从 ReactTransitionGroup 中移除时调用。虽然子级被移除了，ReactTransitionGroup 将会保持它在DOM中，直到callback被调用。

**componentDidLeave() ** 在willLeave callback 被调用的时候调用（与 componentWillUnmount 同一时间）。

详情参考: https://github.com/facebook/react/blob/v0.14.8/docs/docs/10.1-animation.zh-CN.md