Directive unmounted before the end of the transition
Version
3.2.31
Reproduction link
Steps to reproduce
Click on the toggle button to show the div, the background is immediately red. Click again to hide it, the background becomes transparent before the animation ends.
What is expected?
The background must remain red until the end of the animation. The directive must not be unmounted during the transition of the element.
What is actually happening?
The directive is unmounted immediately.
A transition must be a postponement of the DOM removal. During the element's transition, it is still in the DOM. It should remain exactly as it was before the transition began and only process its DOM removal behaviors when actually leaving the DOM.
In my actual scenario, the directive is a "stick-to" directive that attaches the element to another using Popper.js. When "unmounted" is called, I destroy the popper handler object which has the effect of moving the floating item out of position.
When the "unmounted" hook is triggered, the directive should be able to undo whatever changes it had done, regardless of what is outside or how the host element was deleted.
If the "unmount" logic can't be executed in the "unmounted" handler, where should it be?
Duplicate of https://github.com/vuejs/core/issues/994