JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<script src="http://f.cl.ly/items/0q3p1D0e2W2v45210C1H/moofx-couto-min.js"></script>
<button class="trigger">Animate!</button>
<div class="outer">
    <div class="inner"></div>
</div>

CSS

div {
    width: 100%;
}
.outer {
    height: 0;
    background: #999;
}
.inner {
    opacity: 0;
    height: 100px;
    background: #333;
}

JavaScript

(function () {
    var outerEl = $$('.outer'),
        innerEl = $$('.inner'),

        animate = function () {
            moofx(outerEl).animate({ height: 200 }, {
                equation: 'ease-in-out',
                duration: '0.5s',
                callback: function () {

                    moofx(innerEl).animate({ height: '1' }, {
                        equation: 'ease-in-out',
                        duration: '0.5s',
                        callback: function () {
                            console.log('finished');
                        }
                    });

                }
            });
        };
	
    document.getElement('button').addEvent('click', animate);

}());