ReactCssTransitionGroup未在

Question

我正在构建一个带React的个人网站，并试图在加载后几秒钟后让一些h2's淡出。我在以下组件上使用ReactCssTransitionGroup：

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class TitleArea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: ['h2-one', 'h2-two', 'h2-three'],
      h2Texts: ['Text1', 'Text2', 'Text3']
    };
  }

  render() {
    const descriptionDivs = this.state.ids.map( (id, index)=> {
      return(<h2 key={id} id={id}>
        {this.state.h2Texts[index]}
      </h2>)
    })
return (
  <div className='row odd'>
    <h1> MYNAMEHERE </h1>
    <div className='description-container'>
      <ReactCSSTransitionGroup
      transitionName="descriptions"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>
        {descriptionDivs}
      </ReactCSSTransitionGroup>
    </div>
  </div>
    );
  }
}

export default TitleArea;

CSS / SASS：

.site-container {
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  h1 {
    font-size: 50px;
    font-family: 'Arvo', serif;
  h2 {
    font-size: 25px;
   }
  }
.descriptions-enter {
   opacity: 0.01;
 }
.descriptions-enter.descriptions-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
 }

我理想的是希望每个h2都能一个接一个地转换，但是我试图先把反应插件放到一边，然后再跳到淡入淡出的地方。有没有人对React中的css转换有任何经验。尝试跟随文档，但有点迷失。任何见解都非常感谢！感谢