Elements do not return to :initial after leaving the :hovered state

[abhay-agarwal]

I am wondering if this is intentional or an oversight. With most reactive animation libraries, I typically expect a transition to be reversed when a hovered state is left. Currently, elements respect the :hovered transition, but when the mouse leaves the element, the :initial variant is not re-applied. It would be great if it were, otherwise everything is left "stuck" in the hovered state. This makes it difficult to implement any user-interactive animations. Otherwise, the library looks great

[JonHerbert]

Same!

[AaronConlon]

absolutely

[lloyddayekh]

any updates regarding this issue?

[Tahul]

Hey, I would need a reproduction for this!

Also, I am really sorry for the late answer.

Here is a link to a sandbox to help: https://stackblitz.com/edit/vue-zj2zpq?file=src%2FApp.vue

You can modify it to your will and showcase what is the exact issue!

[AaronConlon]

Nice

[leomp12]

On my tests it goes back to visible state on mouse leave on Firefox, on Chrome it goes back only if visible and initial are set https://stackblitz.com/edit/vue-eeacxc?file=src/App.vue

[abhay-agarwal]

On my tests it goes back to visible state on mouse leave on Firefox, on Chrome it goes back only if visible and initial are set https://stackblitz.com/edit/vue-eeacxc?file=src/App.vue

This solution worked for me. Unless there are some other drawbacks to using :visible then I am happy to just use both initial and visible to make interactions reversible! I confirmed that the Firefox solution also works on Mac OS X Safari