Transition does not work in class exchange with JavaScript?

Question

Transition does not work in class exchange with JavaScript?

Navigation

#1 by (2 votes)

0

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

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

I tried putting setTimeout but it did not work. I tried to put the transition into a class apart and call the two and did not.

Code > link

javascript css transition fade efeito

asked by anonymous 16.12.2014 / 07:59

1 answer

Rectangle SVG within another rectangle How to change the cakephp layout

score 2 · Accepted Answer

Unable to animate the property display you will have to use opacity .

I made some more code adjustments and left a simplified suggestion. Note that I changed in JavaScript a lot since the classList API has the .toggle() method and so you do not 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>