javascript - slideUp() and slideDown() animation using React.js

Question

I have created a react component which consist of slideUp() and slideDown() animation. I have implemented using jQuery slideup and slidedown methods.

I have to implement this feature using react animation.

I read about ReactTransitionGroup and ReactCSSTransitionGroup. The way of explanation taught me, we can do this functionality when DomNode mounted to a component or unmount(Correct me if I am wrong).

My question is --> how to do slideup() and slidedown() in react way and without using jQuery.

See this jsFiddle for https://jsfiddle.net/guc3yrm1/

P.S - > Please explain me why this react animation part seems bit a difficult when compare to jQuery(I am a jQuery guy)

var Hello = React.createClass({
    getInitialState: function() {
        return {
            slide: false,
        }
    },
    slide: function() {
        if (this.state.slide) {
            $(this.refs.slide).slideDown();
            this.setState({
                slide: false
            });
        } else {
            $(this.refs.slide).slideUp();
            this.setState({
                slide: true
            });
        }
    },
    render: function() {
        return ( 
            <div>
                <input type = "button" value = "clickme" onClick = {this.slide}/> 
                <br />
                <br />
                <div className = "slide" ref="slide" >< /div>
            </div>
        );
    }
});

ReactDOM.render( < Hello name = "World" / > ,
    document.getElementById('container')
);

Answer 1

You can implement the animations in the both animations' APIs. Here is the main difference:

ReactTransitionGroup is the API upon which ReactCSSTransitionGroup is built. The main difference between the two is that ReactTransitionGroup animations are written in Javascript instead of CSS, and a callback is provided to be invoked when animations are complete instead of relying on CSS transition events.

My conclusion is use CSS animations for the simple tasks, while Javascript for the complex ones.

For example if the component has static height - you can implement it via CSS, as the example shows below. But if the width/height are dynamic, then you can do it with Javascript. In the Javascript example I'm using Velocity library for the animations. It's performance better than jQuery's animations. Of course you can implement the animations by yourself, but why to reinvent the wheel?

I've implemented slideUp/slideDown with the both APIs. Check it out below.

(CSS) Implementation via ReactCSSTransitionGroup:

const CSSTransitionGroup = React.addons.CSSTransitionGroup;
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>
            <CSSTransitionGroup transitionName="example">
            { this.state.visible ? <div className='panel' /> : null }
            </CSSTransitionGroup>
        </div>
    }
}

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

.panel {
    width: 200px;
    height: 100px;
    background: green;
    margin-top: 10px;
}

.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>