javascript - 在使用 ReactCSSTransitionGroup 时遇到问题

Question

我正在尝试实现 ReactCSSTransitionGroup 并遵循 React 网站上的示例。我正在使用 React 0.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

official react docs on CSS transitions说明当最初安装时，过渡组内的组件不会动画化。

-enter 和 enter-active 类仅在更新后添加元素时应用。要么通过状态改变，要么通过父组件的重新渲染。

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

希望这能解决问题。

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

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

并将 ref="myRef" 添加到您的表单以启动动画。那么你就不需要 react CSS 过渡。