在使用reactcstransitiongroup时遇到麻烦

我正在尝试实现reactcstransitiongroup，并遵循React网站上的示例。我使用的是React 0.14-rc1，由于某种原因，reactcstransitiongroup组件似乎没有任何影响。我甚至没有在控制台上得到任何错误。我的代码:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import Dropzone from 'react-dropzone';
import styles from './AddEventForm.css';
import withStyles from '../../../../../decorators/withStyles';
import Link from '../../../../../utils/Link';
import DateSelects from '../DateSelects';
import {StartDateSelect} from '../DateSelects';
import {EndDateSelect} from '../DateSelects';
import {EventTypeSelect} from '../DateSelects';
import ProfileStore from '../../../../../stores/ProfileStore';
import TimelineStore from '../../../../../stores/TimelineStore';
import TimelineDispatcher from '../../../../../dispatchers/TimelineDispatcher';
import TimelineActions from '../../../../../actions/TimelineActions';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
let getProfileState = () => {
  return {
    profile: ProfileStore.getProfile()
  };
}
let getTimelineState = () => {
  return {
    timeline: TimelineStore.getEvents()
  };
}
class AddEventForm extends React.Component {
  _onChange() {
    this.setState(getTimelineState());
  }
  constructor() {
    super();
    this.state = {};
    this.state.files = [];
    this.state.profile = getProfileState();
    this.state.timeline = getTimelineState();
  }
  componentDidMount() {
    TimelineStore.addChangeListener(this._onChange.bind(this));
  }
  componentWillUnmount() {
    TimelineStore.removeChangeListener(this._onChange.bind(this));
  }
  onDrop(files) {
    console.log('Received files: ', files);
    this.setState({
      files: files
    });
  }
  render() {
    return(
      <ReactCSSTransitionGroup
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
            transitionName="EventForm">
        <form onSubmit={ TimelineActions.createEvent.bind(this) } id="addTimelineEventForm" className="AddTimelineEvent">
          <a className="AddTimelineEventCloseButton" onClick={ TimelineActions.closeModal.bind(this) }>
            <i className="fa fa-times"></i>
          </a>
          <h3>Add Event</h3>
          <div className="AddEventTitle TimelineFormField">
            <input ref="event_title"
            className="TimelineInput" placeholder="Title" />
          </div>
          <div className="AddEventPlace TimelineFormField">
            <input ref="event_place"
            className="TimelineInput" placeholder="Place" />
          </div>
          <div className="AddEventLocation TimelineFormField">
            <input ref="event_location"
            className="TimelineInput" placeholder="Location" />
          </div>
          <div className="AddEventDescription TimelineFormField">
            <textarea ref="event_description"
            rows="2" className="TimelineInput" placeholder="Description"></textarea>
          </div>
          <StartDateSelect />
          <EndDateSelect />
          <EventTypeSelect />
          <div className="AddEventMedia TimelineFormField">
            <Dropzone className="Dropzone" activeClassName="DropzoneActive" ref="dropzone" multiple={true} disableClick={false} onDrop={this.onDrop.bind(this)}>
              <div>Try dropping some files here, or click to select files to upload.</div>
              {this.state.files.length > 0 ? 
              <div>
                <div>{this.state.files.map((file) => 
                  <div className="DropzoneUploadedImageContainer">
                    <img className="DropzoneUploadedImage" key={file.preview} src={file.preview} />
                    <br className="clear" />
                  </div> )}
                </div>
                <p className="DropzoneFileCount">{this.state.files.length} files</p>
              </div> : null}
            </Dropzone>
            <p className="AddTimelineEventNote">Note: Images only, maximum 4 images and maximum file size is 2 MB</p>
            <button type="submit" form="addTimelineEventForm" className="SaveEventButton btn btn-primary">Save</button>
            <a onClick={ TimelineActions.closeModal.bind(this) } className="SaveEventButton btn btn-default">Cancel</a>
          </div>
        </form>
      </ReactCSSTransitionGroup>
    );
  }
}
export default AddEventForm;

@keyframes scaleUp {
  from {
    opacity: 0;
    transform:scale(0.2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes scaleDown {
  from {
    opacity: 1;
    transform:scale(1);
  }
  to {
    opacity: 0;
    transform:scale(0);
  }
}
.EventForm-enter {
  opacity: 0.01;
}
.EventForm-appear {
  opacity: 0.01;
  transition: scaleUp .5s ease-in;
}
.EventForm-enter.EventForm-enter-active {
  opacity: 1;
  transform:scale(1);
}
.EventForm-leave {
  opacity: 0;
  transition: scaleDown .5s ease-in;
}

你知道是什么引起的吗?