javascript - Having trouble using ReactCSSTransitionGroup -

i trying implement reactcsstransitiongroup , followed example on react website. using react 0.14-rc1 , reason reactcsstransitiongroup component not seem have affect. not getting errors on console. code:

import react, { proptypes } 'react'; import reactdom 'react-dom'; import classnames 'classnames'; import dropzone 'react-dropzone'; import styles './addeventform.css'; import withstyles '../../../../../decorators/withstyles'; import link '../../../../../utils/link'; import dateselects '../dateselects'; import {startdateselect} '../dateselects'; import {enddateselect} '../dateselects'; import {eventtypeselect} '../dateselects'; import profilestore '../../../../../stores/profilestore'; import timelinestore '../../../../../stores/timelinestore'; import timelinedispatcher '../../../../../dispatchers/timelinedispatcher'; import timelineactions '../../../../../actions/timelineactions'; import reactcsstransitiongroup '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 files here, or click select files 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 , maximum file size 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 {   {     opacity: 0;     transform:scale(0.2);   }    {     opacity: 1;     transform: none;   } }  @keyframes scaledown {   {     opacity: 1;     transform:scale(1);   }    {     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 causing this?

the official react docs on css transitions explain when mounted, components inside transition group not animated.

-enter , enter-active classes applied when item added after update. either trough state change, or through re-rendering of parent component.

if want animate on initial mounting, should add transitionappear={true} reactcsstransitiongroup component. corresponding css classes addtimelineevent-appear , addtimelineevent-appear-active.

hope fixes it.

btw: if want have animation on initial mounting, can add function on componentdidmount():

this.refs.getdomnode('myref').classlist.add("active"); 

and add ref="myref" form set off animation. not need react css transitions.