Does Transition not work with Javascript?

Question

I have a dropdown menu made by me that acts with very simple class exchange(block or none).

The script works and updates classes in the right way, but apparently it ignores the property transition class and does not fade effect.

I tried setTimeout but it didn’t solve. I tried to put Transition in a class apart and call both and did not give.

Code > http://jsfiddle.net/tsuhdm2c/2/

Answer 1

It is not possible to animate the property display you’re gonna have to use opacity.

I made a few more adjustments to the code and left a simple suggestion. Note that I changed in Javascript a lot because the API classList has the method .toggle() and so you don’t need to check if the class is there

Example:

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

function switchbtn(e) {
    e.preventDefault();
    menu.classList.toggle('aberto');
}

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

.header {
    margin:0 auto;
    height:90px;
    width:200px;
    text-align:center;
}
.header .btn {
    background-color:#000;
    display: inline-block;
    width:inherit;
    color:#fff;
    cursor:pointer;
}
.header .menu {
    list-style:none;
    background-color:#488ac6;
    margin:0px;
    padding:0px;
    opacity: 0;
    transition: opacity 1.2s;
}
/* estilos de animação */
 .aberto {
    opacity: 1 !important;
}

<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>