React Slide up and Slide down animation - Javascript Transition group

Implement React Slide up and down animation via TransitionGroup

by Jordan Enev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.panel {
    background: green;
}

JavaScript 1.7

const TransitionGroup = React.addons.TransitionGroup;

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
    	this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <TransitionGroup>
            	{ this.state.visible ? <Accordion /> : null }
            </TransitionGroup>
        </div>
    }
}

class Accordion extends React.Component {

	componentWillEnter (callback) {
		const element = this.container.getDOMNode();
		Velocity(element, 'slideDown', { duration: 200 }).then(callback);
  	}

	componentWillLeave (callback) {
		const element = this.container.getDOMNode();
		Velocity(element, 'slideUp', { duration: 200 }).then(callback);
	}
	
	setContainer(c) {
		this.container = c;
	}

	render() {
		return <div className="panel" ref={this.setContainer.bind(this)}>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
		</div>
	}

}

React.render(<Example />, document.getElementById('container'));