Unwanted menu animation while resizing the window

#1

I have a little CSS-issue with toggling menu. When I shrink the window, menu should be hidden or visible. But the effect is that when I resize the window to the smaller size, the animation of toggling menu is activating. How to avoid it ?

Here’s the pen. https://codepen.io/icelandico/pen/vVPaRV

#2

First, I think your effect is pretty cool. Second, I don’t think you should worry about that, almost everyone that uses our website will stay in the resolution they’ve opened it in the first place.

But still, if you want to do it, that’s one way you can:

First you create a css that disables the transition:

.nav-list.no-transition {
  transition: none !important;
}

Then you’ll listen for resize events and cancel the transition until the user stops the resize.

var resizeTimer;
window.onresize = () => {
  navigationList.classList.add('no-transition');
  
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => navigationList.classList.remove('no-transition'), 250);
};

It’s kind of hacky, but I couldn’t find a better way, maybe someone come up with a better solution.

1 Like
#3

Thank You for comprehensive answer! I try to avoid !important flag if possible, but seems that it’s the only way to solve it. Thanks again.

#4

I don’t think you actually need !important there, but since we don’t want transitions at all costs when an element has the no-transition class, the !important class here actually improves our code by making it really clear what is our intention.

I do agree with you on not using !important trivially.

#5