JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="menu">

	<div class="bar_outer">
		<div class="bar_inner"></div>
	</div>
	
	<div class="dropdown_outer">
		<div class="dropdown_inner">
			<div class="nav_box__nav__staggering_item">Item 1</div>
			<div class="nav_box__nav__staggering_item">Item 2</div>
			<div class="nav_box__nav__staggering_item">Item 3</div>
			<div class="nav_box__nav__staggering_item">Item 4</div>
		</div>
	</div>


</div>

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

html,
body {
	height: 100%;
}


.menu {
	background-color: #444;
}


.bar_outer,
.dropdown_outer {
	transition: .3s;	
}


.bar_outer.is-squeeze,
.dropdown_outer {
	padding: 0 2em;
}


.bar_outer {

}

.bar_inner {
	height: 3em;
	background-color: #eee;
}

.dropdown_outer {
    overflow: hidden;
    height: 0;
	transition: .3s;
}

.dropdown_inner {
    background-color: #eee;
    padding: 5em 0;
}

.nav_box__nav__staggering_item {
	transition: .2s;
	opacity: 0;
	transform: translateY(-10px);
}

.nav_box__nav__staggering_item.is-stagger {
	opacity: 1;
	transform: translateY(0px);
}

JavaScript

var w = window,
    d = document,
    $html = d.documentElement,
    $body = d.body,
    qs = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelector(arg2);
        }

        return d.querySelector(arg1);
    },
    qsa = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelectorAll(arg2);
        }

        return d.querySelectorAll(arg1);
    },
    ael = function($el, evt, cb, uc) {
        if (!$el || !evt || !cb) return;

        if ($el !== w && $el.length) {
            $el.forEach(function($el) {
                $el.addEventListener(evt, cb, uc);
            });

            return true;
        }

        return $el.addEventListener(evt, cb, uc);
    },

    ael1 = function($el, evt, cb, uc) {
        var cb_ = function( e ) {
            cb( e );
            $el.removeEventListener(evt, cb_);
        };

        return ael($el, evt, cb_, uc);
    },


    transition_end_event = (function() {
        var t,
            el = document.createElement("fakeelement");

        var transitions = {
            "transition": "transitionend",
            "OTransition": "oTransitionEnd",
            "MozTransition": "transitionend",
            "WebkitTransition": "webkitTransitionEnd"
        }

        for (t in transitions) {
            if (el.style[t] !== undefined) {
                return transitions[t];
            }
        }
    })(),
	
	oneTransitionEnd = function ( $el, cb, uc ) {
		function cb_( e ) {
			if ( e.target !== e.currentTarget ) return;
			cb();
			$el.removeEventListener(transition_end_event, cb_);
		}
		
		ael($el, transition_end_event, cb_, uc);
	},

    forceRedraw = function() {
        $html.offsetWidth;
    };





var menu = qs('.menu'),
	bar_outer = qs('.bar_outer'),
	bar_inner = qs('.bar_inner'),
	dropdown_outer = qs('.dropdown_outer'),
    dropdown_inner = qs('.dropdown_inner'),
	nav_box__nav__staggering_itemS =...