search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.04k stars 582 forks source link

removed blinking when toggling the reveal menu #420

Closed nikitapozdeev closed 3 years ago

nikitapozdeev commented 3 years ago

Hi. Just a small fix for #419

negomi commented 3 years ago

Hi @crabn3bula,

Thanks for this! I took a look at the code and I think a better option might be removing visibility and setting z-index: -1.

I just pushed this change and it seems to be fixed on the demo page.

Is it working for you too?

nikitapozdeev commented 3 years ago

@negomi Thanks for your reply.

I tried your suggestions, but with z-index: -1 mouse events stop working for the menu.

It might be better to do something like this zIndex: isOpen ? 1000 : -1, this way the problem seems to be solved as long as the transition duration is 0.5s. If in the future this value changes for example to1s, then the problem will reappear.

So that`s why i initially decided to override transition property in this specific menu.

negomi commented 3 years ago

Oh I see. The problem with overriding transition is that it makes the menu disappear while it's closing.

Transition duration is unlikely to change so I like the idea of zIndex: isOpen ? 1000 : -1 for now.

I've just released 2.9.2 which includes that fix.

Thanks again!