JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <a class="btn">Botao abre/fecha Menu</a>
    <ul class="menu" id="idmenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

CSS

.header{
    margin:0 auto;
    height:90px;
    width:200px;
    text-align:center;
}
.header .btn{
    background-color:#000;
    width:inherit;
    color:#fff;
    float:right;
    cursor:pointer;
}
.header .menu{
    list-style:none;
    background-color:#488ac6;
    margin:0;
    padding:0;
    display:none;
}

/* estilos de animação */

.fechado{
    display: none !important;
}
.aberto{
    display: block !important;
}
.trans{
    transition: all 2s;
}

JavaScript

var botao_menu = document.querySelector('.header .btn');
var menu = document.getElementById('idmenu');

function switchbtn(){
    if(!menu.classList.contains('aberto')){
        menu.classList.remove('fechado');
        menu.classList.add('aberto','trans'); 
        // trans devia funcionar e dar o efeito
        /* tb tentei assim
        setTimeout(function(){
            resmenu.classList.add('aberto','trans');
        }, 1000);
        */
    }
    else{
        menu.classList.remove('aberto');
        menu.classList.add('fechado');
    }
}

botao_menu.addEventListener('click',switchbtn,false);