Simple example of React Transitions in Meteor

app.jsx

// Just create a new Meteor app, add the packages below, delete the css, html, and js files and copy this file in.
// Packages to add:
// meteor add react
// meteor add velocityjs:velocityjs
// Click on the text and see it fly!

ReactTransitionGroup = React.addons.TransitionGroup;
Title = React.createClass({
	componentWillEnter(done){
		console.log('Will Enter');
		node = this.getDOMNode();
    $(node).velocity({
      left: "50%",
    }, {
      complete: done,
    });
		// done();
	},
	componentWillAppear(done){
		console.log('Will Appear');
		node = this.getDOMNode();
    $(node).velocity({
      left: "50%",
    }, {
      complete: done,
    });
		// done();
	},
	componentWillLeave(done){
    console.log("Will Leave");
    node = this.getDOMNode();
    $(node).velocity({
      left: "0",
    }, {
      complete: done,
    });
		// done();
	},
  render(){
    style={
      position:'absolute',
      left:'100%',
    }
    return (
      <div style={style} onClick={this.props.changeTitle}>{this.props.title}</div>
    )
  },
});

Main = React.createClass({
  getInitialState: function() {
    return {
      title: 'Main'
    };
  },
  changeTitle: function() {
    if (this.state.title === 'Home') {
      return this.setState({
        title: 'Main'
      });
    } else {
      return this.setState({
        title: 'Home'
      });
    }
  },
  render(){
  	const styles={
  		Main:{
	      width: '100%',
	      fontSize: '25px',
	      // textAlign: 'center',
	      marginTop: '20px'
  		},
  	}
    return (
      <div style={styles.Main}>
        <ReactTransitionGroup>
        	<Title changeTitle={this.changeTitle} title={this.state.title} key={this.state.title}/>
        </ReactTransitionGroup>
      </div>
    )
  },
});

Meteor.startup(function () {
  React.render(<Main />, document.getElementsByTagName("body")[0]);
});