Version

3.2.20

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. Open the reproduction
2. Click "Toggle transition" button
3. Hover the "one", "two" or "three" element within 10 seconds and watch the console logs

What is expected?

Expected to still have a ref to the DOM element, while it is in a leave-active transition state.

What is actually happening?

As soon as the leave-active transition state begins, ref is thrown away, and there is no access to the element.

I have @mouseenter event that triggers on displayed items so I'd need the ref to access the element while it's leaving.

I have temporarily "patched" the event handler function to only work on the element if it's there:

if (reference.value){...}

Please note that the element's ref is available in it's enter-active state, it's only unavailable in the leave-active state, even though the element is still present in the DOM.

I would say the bug here is the event listeners not being removed while the element is leaving rather than the ref being unset because the element already fired its unmounted event while it's leaving. Having the ref unset is actually consistent because if the element is leaving it's supposed not to be there anymore (e.g. v-if="false").

I would say the bug here is the event listeners not being removed while the element is leaving rather than the ref being unset because the element already fired its unmounted event while it's leaving. Having the ref unset is actually consistent because if the element is leaving it's supposed not to be there anymore (e.g. v-if="false").

This has very little to do with the current issue but out of curiosity, are events supposed to be attached during the appear transition? Currently I've noticed that it's not possible with the latest version of VueJS to click on components that haven't finished their transitions. Is this behavior defined somewhere in the documentation ?

PS: To focus more on the actual issue, is there a specific behavior on transitions, or is it just supposed to work?