Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save pravin-d/770abd675b8cf1bdcd9a684c974fc76a to your computer and use it in GitHub Desktop.
Save pravin-d/770abd675b8cf1bdcd9a684c974fc76a to your computer and use it in GitHub Desktop.
A naive way to get JQuery slide/fade animations in React.js
var JQuerySlide = React.createClass({
componentWillEnter: function(callback){
var $el = $(this.getDOMNode())
$el.slideDown(function(){
callback();
});
},
componentWillLeave: function(callback){
var $el = $(this.getDOMNode());
$el.slideUp(function(){
callback();
});
},
render: function(){
return this.transferPropsTo(this.props.component({style: {display: 'none'}}));
}
});
var JQueryFade = React.createClass({
componentWillEnter: function(callback){
var $el = $(this.getDOMNode())
$el.fadeIn(function(){
callback();
});
},
componentWillLeave: function(callback){
var $el = $(this.getDOMNode());
$el.fadeOut(function(){
callback();
});
},
render: function(){
return this.transferPropsTo(this.props.component({style: {display: 'none'}}));
}
});
// Call like this:
// return (<div> Whatever other stuff you want to put around it, if desired
// <ReactTransitionGroup>
// <JQuerySlide component={yourComponentOrAReactDomComponentClass} otherProp={a} otherProp={B} />
// </ReactTransitionGroup>
// </div>);
// Note: You need to transfer the style onto whatever is underlying, either
// with transferPropsTo or with a style= prop on your returned element.
// If you set a key, anything with a different key will be a new element, and
// the new one will be appearing simultaneous with the old one disappearing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment