[FEATURE] MazExpandAnimation trigger by a v-if

[Nicolae Alexandru]

Hello,

I found really hard to use the new component MazExpandAnimation over MazTransitionExpand because of the v-model. I use MazTransitionExpand in a sidebar which has subcategories. Something like:

Each element (Except the first 'Shop' one) has an height animation which i should trigger when the user is on a specific page and when mouseover/mouseleave events are triggered.

To replace with MazExpandAnimation will cause more code to write (in a Laravel, InertiaJS and Vue3 project) because i would need to create a v-model for each element and use watch for route.

For example, i have menu components for height animation which are triggered based on the current mounted component and i just use their value in a v-if of the MazTransitionExpand. To move the menu components to MazExpandAnimation, i would need to create a v-model for each of them, useWatch from Vue to detect mounted component name and based on it's name, make all menu items v-models false except the active one.

My suggestion for an ehnancement of in cause component is to add a the same feature of MazTransitionExpand. I know this can be an isolated case, but for me and maybe for others would be an useful enhancement.

Thanks for taking your time to read this.

[Mazel]

Hi @lexzor,

I'm not sure to understand. Nothing really changes between the behaviors of the 2 components.
I think you can simply use the component like this to avoid creating multiple models:

<MazExpandAnimation :model-value="openMenu === 'HOME'">
 ...
</MazExpandAnimation>
<MazExpandAnimation :model-value="openMenu === 'PRODUCTS'">
  ...
</MazExpandAnimation>

Share a part of your code if it's not good for you.

Let me know or close this issue :)

[Nicolae Alexandru]

Worked, I learned something today. Thanks @LouisMazel.