javascript - jQuery and ReactJS ONLY animations -

i need use jquery animations, please not mention transitions.

this code base

var commentform = react.createclass({      componentwillunmount: function(cb) {         console.log('hiding')         jquery(this.getdomnode()).slideup('slow', cb);         console.log((this.getdomnode()))     },      componentdidmount: function() {          jquery(this.getdomnode()).hide().slidedown('slow');          if (this.props.autofocus) {             jquery(this.refs.commentarea.getdomnode()).focus();         }      },      render: function() {         return (             <div>                 <div classname="panel-footer" ref="commentcomponent">                     <form role="form">                         <div classname="form-group">                             <textarea classname="form-control" placeholder="say nice!" ref="commentarea"></textarea>                         </div>                         <div classname="pull-right">                             <button classname="btn btn-default btn-md" type="button"><span classname="fa fa-comment"></span> comment</button>                         </div>                         <div classname="clearfix"></div>                     </form>                 </div>             </div>         );     }  }); 

so may see, add awesome animation when component mounted, cannot unmount component animation have mentioned on code.

any thoughts how jquery ? , reactjs component life cycle ?

here attempt in solving issue using overly simplistic demonstration.

jsfiddle.

javascript:

var container = react.createclass({     onclicked: function() {         console.log('container.onclicked');         if(this.state.isshowing){             this.refs.myhelloworld.hide();         } else {             this.setstate({ isshowing: true });         }     },     onanimationcomplete: function() {         console.log('container.onanimationcomplete');         this.setstate({ isshowing: false });     },     getinitialstate: function() {         return { isshowing: false };     },     render: function() {         var helloworld = this.state.isshowing ? <hello name="world!" oncomplete={this.onanimationcomplete} ref="myhelloworld" /> : '';         return (             <div id="container">                 <mybutton onbuttonclicked={this.onclicked}/>                 {helloworld}             </div>         );     } });  var mybutton = react.createclass({     render: function() {         return <button onclick={this.props.onbuttonclicked}>toggle</button>;     } });  var hello = react.createclass({     hide: function() {         console.log('hello.hide');         var = this;         $(react.finddomnode(this)).stop(true).fadeout({             duration: 1200,             complete: function() {                 that.props.oncomplete();             }         });     },     componentdidmount: function() {         console.log('hello.componentdidmount');         $(react.finddomnode(this)).stop(true).hide().fadein(1200);     },     componentwillunmount: function() {         console.log('hello.componentwillunmount');     },     render: function() {         return <div>hello { this.props.name }</div>;     } }); react.render(<container />, document.body); 

as have figured out not difficult animate child component in main view using componentdidmount life-cycle event.

however, tricky same when want animate out our child component our main view because corresponding componentwillunmount life-cycle event triggers after our view has un-mounted , there no event available use before that. , if there was, have had manually remove our child component either within or main view. thinking of using react.unmountcomponentatnode same figured out way.

the solution first send callback main view child component parameter used later. call child component's method animate out component's dom node itself. , finally, when animation complete, trigger same callback received earlier.

hope helps.

p.s. approach not tightly bound jquery's animate() , related methods instead, approach can used other js-based animation libraries (i looking @ favourite gsap ;)), long trigger callback when animation completed (and gsap provides plethora of them).

update #1 :

wah wah vee va!

so happens, digging reactjs more , animation parts , found, have exposed low-level api transition events.

so thing trying accomplish earlier our own callbacks, , our props object maintaining reference etc, turns out, can done using api itself.

i not sure if @ moment because yet implement both of these techniques in real project happy have options available. can use internal api, or can cook our own solution proposed earlier.

take @ modified jsfiddle doing same thing time using internal callbacks such componentwillenter , componentwillleave.