Having trouble using ReactCSSTransitionGroup

Question

I am trying to implement ReactCSSTransitionGroup and followed the example on the React website. I am using React 0.14-rc1 and for some reason the ReactCSSTransitionGroup component does not seem to have any affect. I am not even getting any errors on the console. my code:

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

Any idea what could be causing this?

Answer 1

The official react docs on CSS transitions explain that when initially mounted, components inside transition group do not get animated.

-enter and enter-active classes are only applied when item is added after an update. Either trough state change, or through re-rendering of parent component.

If you want to animate on initial mounting, you should add transitionAppear={true} to your ReactCSSTransitionGroup component. The corresponding css classes are AddTimeLineEvent-appear and AddTimeLineEvent-appear-active.

Hope this fixes it.

BTW: if you only want to have an animation on initial mounting, you can add a function on componentDidMount():

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

and add ref="myRef" to your form to set off the animation. Then you do not need react CSS transitions.