CSS Transitions Have Inconsistent Delay

Question

I'm am building a simple drown down menu with sliding animation. Once the menu has been slid up it applies CSS to make the dropdown menu invisible but still screen-reader accessible.

Problem: When I press the button to expand the drop-down menu, it expands immediately. HOWEVER when I press the button to collapse the drop-down menu, it has a big delay (this needs to be fixed).

Snippet:

//accessible hiding sliding test

var sliderButton = document.getElementById('slider-button');
var slider = document.getElementsByClassName('slider')[0];

// toggle closed class to start max-height transition animation
sliderButton.addEventListener("click", function(){

    if(slider.classList.contains('closed')){
        slider.classList.remove('closed');
        slider.classList.remove('sr-only');
    }else{
        slider.classList.add('closed');
    }
});

// after finishing transition, if its closed, add 'sr-only' for  accessible hiding!
slider.addEventListener('transitionend', function(event){

  if(event.propertyName == 'max-height'){
    if(slider.classList.contains('closed')){
      slider.classList.add('sr-only');
    }
  }
});

.slider {
    position: absolute;
    overflow-y: hidden;
    white-space: nowrap;
    max-height: 500px; /* approximate max height */
    width: 250px;
    left: 10px;

      transition-property: max-height;
    transition-duration: 1s;
    transition-delay: 0s;
    background-color: lawngreen;
}

.slider.closed {
    max-height: 1px;
}

.sr-only{ /* screen reader accessible hiding! */
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    max-height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

<a id="slider-button">click here to toggle the content!</a>

<ul class="slider">
  <li>Women</li>
  <li>Men</li>
  <li>Camping</li>
  <li>Blog</li>
  <li>Theme Info</li>
</ul>

As can be seen from the snippet above the drop-down menu has inconstant delays, any way to remedy this?

Rakowu Rakowu · Accepted Answer · 2021-04-07T06:30:20

0

votes

Try to replace max-height with height. Seems to me that he can not calculate the values.

CSS Transitions Have Inconsistent Delay

1 Answers