Slide Up and Down with React Transition Group

Group.css

.Group-item,
.Group-item.ui,
.Group-item.ui:first-child {
    display: block;
    margin-top: 1em;
}

.Group-item-enter.Group-item-enter-active {
    transition: opacity 300ms ease-in, margin 300ms ease-out;
}

.Group-item-exit.Group-item-exit-active {
    transition: opacity 300ms ease-out, margin 300ms ease-in;
}

.Group-item-enter,
.Group-item-exit.Group-item-exit-active {
    opacity: 0;
}

.Group-item-enter.Group-item-enter-active,
.Group-item-exit {
    opacity: 1;
}

Group.js

import React, {Component} from 'react';
import classNames from 'classnames';

import {CSSTransition, TransitionGroup} from 'react-transition-group';

import './Group.css';

const duration = 300,
    onEnter = node => {
        node.style.marginTop = `-${node.offsetHeight}px`;
        node.style.marginBottom = `0px`;
    },
    onEntering = node => {
        node.style.marginTop = "";
        node.style.marginBottom = "";
    },
    onExit = node => {
        node.style.marginTop = "";
        node.style.marginBottom = "";
    },
    onExiting = node => {
        node.style.marginTop = `-${node.offsetHeight}px`;
        node.style.marginBottom = `0px`;
    };

export default class Group extends Component {

    state = {
        items: []
    };

    setItems = children => this.setState({
        items: React
            .Children
            .toArray(children)
    });

    componentDidMount() {
        const {children} = this.props;
        this.setItems(children);
    }

    componentWillReceiveProps({children}) {
        this.setItems(children);
    }

    render() {
        const {
                className,
                ...props
            } = this.props, {items} = this.state;
        return <TransitionGroup className={classNames(className, 'Group')} {...props}>
            {
                items.map(
                    item => <CSSTransition
                        className={classNames(item.props.className, 'Group-item')}
                        classNames="Group-item"
                        key={item.key}
                        timeout={duration}
                        onEnter={onEnter}
                        onEntering={onEntering}
                        onExit={onExit}
                        onExiting={onExiting}>
                        {item}
                    </CSSTransition>
                )
            }
        </TransitionGroup>;
    }
}