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 imple

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 

            {this.state.visible ? 'Slide up' : 'Slide down'}
            
            	{ this.state.visible ? 
 : null }
            
        
    }
}

React.render(, 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;
}

JSFiddle - React Slide up and Slide down animation - CSS Transtion Group.

---

(Javascript) Implementation via ReactTransitionGroup:

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 

            {this.state.visible ? 'Slide up' : 'Slide down'}
                
                    { this.state.visible ?  : null }
                
            
        }
    }

    class Accordion extends React.Component {
        componentWillEnter (callback) {
            const element = this.container.getDOMNode();
            Velocity(element, 'slideDown', { duration: 300 }).then(callback);
        }

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

        setContainer(c) {
            this.container = c;
        }

        render() {
            return 

                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.
            
        }
    }

React.render(, document.getElementById('container'));

.panel {
    background: green;
    margin-top: 10px;
}

JSFiddle - React Slide up and Slide down animation - Javascript Transition group.

---

Credits:

• Animations with ReactTransitionGroup
• CSS vs. JS Animation: Which is Faster?