JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div id='mainmenu'>Hello</div>
<button id="btn1">Click me1</button>
<button id="btn2">Click me2</button>

CSS

#mainmenu {
    width:100px; 
    height:100px; 
    background:#eee; 
    -webkit-transition: opacity 1s ease;
       -moz-transition: opacity 1s ease;
        -ms-transition: opacity 1s ease;
         -o-transition: opacity 1s ease;
            transition: opacity 1s ease;
}

.fadeout {
    opacity:0;
}

.fadein {
    opacity:1;
}

JavaScript

var menu = document.getElementById('mainmenu'),
    btn1 = document.getElementById('btn1'),
    btn2 = document.getElementById('btn2');

function getFadeoutListener(menu) {
    return fadeoutListener = function() {
        menu.style.display = "none";
        menu.removeEventListener("webkitTransitionEnd", fadeoutListener);
    };
}

btn1.addEventListener('click', function() {
    menu.className = 'fadeout';
    menu.addEventListener("webkitTransitionEnd", getFadeoutListener(menu));
});

btn2.addEventListener('click', function() {
    menu.style.display = "block";
    setTimeout(function() {
        menu.className = 'fadein';
    }, 0);
});