JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="mount"></div>

CSS

.item {
    border: 1px solid grey;
    height: 40px;
}
#item1 {
    border: 1px solid red;
}
.anim-enter, .anim-leave {
    transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
}
.anim-enter, .anim-leave.anim-leave-active {
    opacity: 0.25;
    transform: scale(1, 1);
    transform-origin: top left;
    overflow: hidden;
    height: 0;
}
.anim-leave, .anim-enter.anim-enter-active {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: top right;
    overflow: hidden;
    height: 40px; /* looks good there, but I don't always know the height */
}

JavaScript

/*
 * React animating example manipulating element height
 * - This is for known element height
 * - Looks good, but only if I know the height before render
 */

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var Item = React.createClass({
    displayName: 'Item',
    render: function () {
        return React.createElement('div', {
            id: this.props.label,
            className: 'item'
        }, this.props.content);
    }
});

var Group = React.createClass({
    displayName: 'Group',
    getInitialState: function () {
        return {
            isActive: true
        };
    },
    toggleDisplay: function () {
        this.setState(function (state) {
            return {
                isActive: !state.isActive
            };
        });
    },
    render: function () {
        var firstItem = null;
        if (this.state.isActive) {
            firstItem = React.createElement(Item, {
                key: 'item1',
                label: 'item1',
                content: 'foo'
            });
        }
        var secondItem = React.createElement(Item, {
            key: 'item2',
            label: 'item2',
            content: 'bar'
        });
        return React.createElement('div', null,
        React.createElement('button', {
            onClick: this.toggleDisplay
        }, 'Toggle Display'),
        React.createElement(ReactCSSTransitionGroup, {
            transitionName: 'anim'
        }, firstItem, secondItem));
    }
});

var mount_div = document.getElementById('mount');
React.render(React.createElement(Group, null), mount_div);