Menu with animation breaks position

[rettimo]

React/React-dom version: 18.3.1
React-Menu version: 4.1.0

Describe the bug

I used the tailwind example as a basis for my menu and styling. It was later noticed that due to the scale animation, I was getting the wrong menu position after fully opening.

Example 1:

keyframes: {
   fadeIn: { from: { opacity: 0, transform: "scale(.95)" } },
   fadeOut: { to: { opacity: 0, transform: "scale(.95)" } },
},

Example 2:

keyframes: {
   fadeIn: { from: { opacity: 0, transform: "scale(.5)" } },
   fadeOut: { to: { opacity: 0, transform: "scale(.5)" } },
},

To Reproduce

1. Use tailwind example as a basis.
2. Set align="center" to the Menu component.
3. Change the scale to any value, or leave the original.
4. Watch the menu shuffle when using this animation.

Expected behavior

The use of animations should not affect the menu position

[szhsin]

Hi @rettimo , thanks for raising the issue. I will be looking into a possible fix of it.

[rettimo]

Any updates about this?

[szhsin]

Have done the fix in this branch https://github.com/szhsin/react-menu/compare/feat/normalize-scale?expand=1#diff-a80d3ba2a1d3e27acec4cecbafc291463c08ea56008ca6f73c9bdf9c6de4784f

I'm adding some scale-based animation examples and updating docs. A new version should be expected tomorrow.

[szhsin]

Issue fixed by v4.2.0.

This release also added a zooming animation css file which is used by default on the docs website: https://szhsin.github.io/react-menu/