Open tigorthemusichead opened 2 years ago
Same problem here, but didn't change the width of anything and I realized that on my phone the animation works fine, but on my computer it doesn't @negomi
This is my code... It works fine, expect the animation, looks like @tigorthemusichead 's one
@tigorthemusichead For a custom width, I would recommend using the width prop: https://github.com/negomi/react-burger-menu#width
@theoradicella I think your code looks ok, are you just using the slide animation? The next thing I would check would be any custom styles/complexity in the markup structure of your app that could be interacting strangely with the menu.
For me the fix was to remove isOpen, onOpen and onClose properties `<Menu right pageWrapId={"page-wrap"} outerContainerId={"__next"} customBurgerIcon={ <Hamburger toggled={isHamburgerMenuOpen} toggle={setHamburgerMenuOpen} color="#FFFFFF" label="Show menu" size={35} /> } onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)}
`
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I'm experiencing this same problem. I can click to open and close the drawer 10 times in a row and see different results. The closing animation always works, but the opening animation sometimes gets skipped. I'm just using the basic slide animation. I do have a custom width, which I switched from a CSS width to a prop width, but it did not fix the behavior.
I wonder if it's some kind of race condition related to the hidden="true"
:
Watching the elements in the inspector, I see the hidden="true"
gets added after the drawer close animation completes. If I manually remove the hidden="true"
in the inspector before clicking to open the drawer again, it animates correctly.
For context, I'm using Chrome on a Mac.
Its the same even on the documentations example for certain animations when "right" is selected eg. scaleRotate
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
For me the fix was to remove isOpen, onOpen and onClose properties
<Menu right pageWrapId={"page-wrap"} outerContainerId={"__next"} customBurgerIcon={ <Hamburger toggled={isHamburgerMenuOpen} toggle={setHamburgerMenuOpen} color="#FFFFFF" label="Show menu" size={35} /> } onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)} >
this worked for me expect I was able to keep the isOpen prop. it was just the onClose and onOpen I needed to remove
Menu opens without animation sometimes. It looks like this:
https://user-images.githubusercontent.com/92551370/159765763-e68dd7ce-35d6-41d5-9b48-de1b7db6f96d.mov
The only thing I changed in the library code is width for .bm-menu-wrap in burger-menu.css
It looks like the custom width conflicts width something. I use slide animation, but the same problem appeared for all of them.