使用ReactCSSTransitionGroup有困难

Question

我正在尝试实现ReactCSSTransitionGroup，并效仿了React网站上的例子。我使用的是Reactive0.14-Rc1，由于某种原因，ReactCSSTransitionGroup组件似乎没有任何影响。我甚至没有在控制台上看到任何错误。我的代码：

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;

CSS：

@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;
}

知道是什么导致的吗？

Answer 1

官方对CSS转换的反应解释说，在最初挂载时，转换组中的组件不会获得动画。

只有在更新后添加项时才应用-enter和enter-active类。要么通过状态变化，要么通过重新呈现父组件。

如果您想在初始安装时动画化，应该将transitionAppear={true}添加到您的ReactCSSTransitionGroup组件中。对应的css类是AddTimeLineEvent-appear和AddTimeLineEvent-appear-active。

希望这能解决问题。

顺便说一句:如果您只想在初始安装时拥有一个动画，您可以在componentDidMount()上添加一个函数：

this.refs.getDOMNode('myRef').classList.add("active");

并将ref="myRef"添加到窗体中，以启动动画。然后您就不需要对CSS转换做出反应了。