Forums

Give help. Get help.

  • # January 5, 2018 at 6:51 pm

    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/

    # January 5, 2018 at 7:06 pm

    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

    # January 5, 2018 at 7:42 pm

    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. :)

    # January 5, 2018 at 8:06 pm

    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 .

    # January 5, 2018 at 8:22 pm

    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.

    # January 5, 2018 at 11:21 pm

    Here’s a small demo to illustrate it:

    codepen.io/rpYMRJ

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag