Some components can't have animation on exit

[nonwip]

Description

When I use a dialog component for example, and add animation classes for enter and exit, only enter animation works. It's like the exit animation is being terminated by the attribute that Ark adds on multiple elements.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/vitejs-vite-xmvqqu

Steps to Reproduce

1. Click the button
2. Dialog shows up with animation on enter
3. Close the dialog and there's no exit animation

Tailwind classes are in place and animations are inside of tailwind config.

Ark UI Version

3.7.2

Framework

• [ ] React
• [ ] Solid
• [X] Vue

Browser

All

Additional Information

No response

[segunadebayo]

It must have something to do with the Vue presence + dialog implementation.

If anyone is interested, here's the place to look Vue: https://github.com/chakra-ui/ark/blob/75f45583974efa9280c13bf8b9c19919d044de81/packages/vue/src/components/dialog/dialog-content.vue#L1

React: https://github.com/chakra-ui/ark/blob/75f45583974efa9280c13bf8b9c19919d044de81/packages/react/src/components/dialog/dialog-content.tsx#L1

There's an obvious different in the implementation.

[YaredFall]

I also encountered this problem while trying to animate DialogContent in my Nuxt3 project. It seems that the problem is that in Vue implementation the Presence component is only used for DialogPositioner. Presense component does not observe animations of the child elements and thats the reason why it does not wait for DialogContent animations. In React implementation, however, presence is used for DialogContent. So, the current workaround is to move your animations to DialogPositioner instead of DialogContent

[nonwip]

@YaredFall I will try it out. Can I assume it's same incorrect implementation for all Vue components?

Been testing some main components like Tooltips, Dialogs, Popovers, Datepicker - none of them can be animated on exit. So I wonder if moving animations to Positioner will make it work in all cases (until someone fixes it)?

[YaredFall]

@dvlden I gave a glance to these components and they all built the same. So yes, moving animations to Positoner should make it work

[YaredFall]

I think I managed to find a fix, I have rewritten DialogPositioner and DialogContent to be closer to React implementation source code comparison. Tested it in dialog stories, DailogContent animations now working. I must mention that similar fixes should be applied to any component with a Positoner. I do not have time for a PR with fixes for all of the components right now, but maybe later. Or maybe some of the maintainers will look into it.

[nonwip]

@YaredFall fantastic. That's quite a chunk of changes for a single component. I hope you or someone else finds time for this, to implement into all components.

Thanks for the help! I will simply move animations to Positioner at this time.

For me, moving the animation to Positioner did not have any effect. Only animation-in works, still. :/

[YaredFall]

@dvlden I'm sorry, forgot to mention that you also need to set display property on the Content to override hidden attribute.

For me, moving the animation to Positioner did not have any effect. Only animation-in works, still. :/

Anyway, I made a PR, hope for a review :pray:

[nonwip]

Just saw the PR, waiting for its merge and release. Thank you @YaredFall !

[Omikorin]

It's merged 🎉

[dahaca]

Hey, @segunadebayo ! ✌️ I am sadly encountering the same issue in React on 4.5.0 (also tried on 4.3.0) :/

While Dialog seems to be working fine, Tooltip has no unmounting animation. The implementation of animations is identical. What's odd, is that in the docs example, everything seems to be the same as well, yet there it works fine. I've also tried making it controlled – same result.

// this is then passed to `<Tooltip.Content />`

export const tooltipRecipe = defineRecipe({
  className: "tooltipRecipe",
  description: "Tooltip",
  base: {
    // ...some styles...

    _open: {
      animation: "scaleAndFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
    },
    _closed: {
      animation: "scaleAndFadeOut 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
    },
  },
});