The transition for the menu on my mobile page doesn't trigger

[wost]

For some reason the .navigation’s transition won’t trigger when I click my menu, what have I done wrong?
This is the code I’m using:

const openMenu   = document.getElementById("open-menu")
const navigation = document.getElementById("navigation")

openMenu.addEventListener('click', (e) => {
  navigation.classList.toggle("show");
});

and this is the Sass (it’s in a media query, though, could that have anything to do with that?)

      #navigation
        display: none
        opacity: 0
        height: 0
        transition: 0.3s all
        &.show
          display: block
          opacity: 1
          height: auto

This is my page: https://wostensen.github.io/new-new-new-personal-pagr/

[Shikkediel]

You can’t transition an element from none to block, so you probably want to use just use opacity.

By the way, arrow functions are neat but I’ve avoided them myself for lack of cross browser support…

https://caniuse.com/#feat=arrow-functions

[wost]

But shouldn’t the height and the opacity be affected by the transition, I only set display to block to make it not be none.

I run my JS through Babel, so if you look through the sources of my page, it should be ES5-compliant. :)

[Shikkediel]

Good question, it’s obvious that it won’t fade out (because it will be instantly hidden) but I’m not sure why it wouldn’t work the other way around. The auto height value isn’t animatable either so that won’t have an effect.

Edit – and I don’t think it would be noticeable unless you use overflow: hidden .

[Shikkediel]

Must have to do with the fact that display: none removes the element from the page flow, so it’s “not really” there when the animation starts…

Works fine with the visibility property.

Once again I’ll edit – I had something similar last week. The CSS will only “realise” it is not display: none anymore until the next calculation cycle of the machine. In my example, I set a zero delay timeout to execute the next block of code.

[Shikkediel]

Here’s a small demo to illustrate it:

codepen.io/rpYMRJ

[Author]

Posts