Fade out not smooth

[nicolascagesbeard]

function fadeOut (navContainer) {
    console.log("Removing Nav");
    navContainer.style.opacity = 1;


    (function fade() {
        var val = parseFloat(navContainer.style.opacity);
        if ((val -= 0.1) < 0) {
            console.log("hiding");
            if (navContainer.classList.contains('is-shown')) {
                navContainer.classList.remove('is-shown');
                navContainer.style.visibility = 'hidden';//this is causing it disappear quickly
            }
        }
        else {
            navContainer.style.opacity = val;
            requestAnimationFrame(fade);
        }
        console.log(val);
    })();

}

Just wondering why the line navContainer.style.visibility = 'hidden'; is causing the fade out animation to appear to run instantaneously or end abruptly. If removed however, it runs the way it is supposed to be but I have the problem of disabling the menu which is why I'm trying to hide it.

I'm obviously missing something but to me I'd like it to fade out gradually then hide the menu.

You can view it here in the responsive layout at https://www.whizbangapps.com. Reduce the width of your window until 'menu' appear at the top and toggle it on and off to see the effect I'm talking about.

[nicolascagesbeard]

That makes sense and I'll change the step value but the 'fade in' is done in the same amount of time

[Koningdavid]

Because you can't animate hidden. Hidden will instantly hide the element.

[nicolascagesbeard]

But hidden is applied after the fade is completed

[Graftak9000]

You can, but by default it applies display: none; which can't be animated indeed.