-
-
Notifications
You must be signed in to change notification settings - Fork 33.8k
destroy hook is called before transition finishes #6983
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Comments
This is expected behavior. Think of it the other way around: the leave transition is triggered by the removal of the element. Transition state is ephemeral and does not reflect Virtual DOM state - in the virtual DOM the element is considered to be already destroyed. If you want to do something when the element is finally removed in real DOM, use transition hooks instead. |
@yyx990803 |
@plashenkov I believe @yyx990803 is referring to using 'transitionend': https://codepen.io/autumnwoodberry/pen/RjWoWb?editors=1111 |
@autumnwoodberry Thanks, but this is a kind of a workaround though. For example, if a transition is not used, then |
Is there a known "best practice" how to wait for the transitions to finish when they are "outside" of the current component - e.g. a page transition around vue-router? Example: I need to wait for the page transitions to fix: staskjs/vue-slick#56 |
I made a mixin to work around this issue: https://www.npmjs.com/package/vue-removed-hook-mixin |
Another side problem is that : When using with router-view <transition mode="out-in">
<router-view/>
</transition> If the A workaround is to fix the links manually on all router-views : {
...
beforeRouteLeave(to, from, next) {
for (let link of this.$el.querySelectorAll(`a[href="${to.path}"]`))
link.classList.add('router-link-exact-active')
next()
}
} Not clean for a Vue app, but if someone has a better solution... |
Version
2.5.2
Reproduction link
https://codepen.io/autumnwoodberry/pen/yPNdRB
Steps to reproduce
What is expected?
destroyed hook is not executed until after the transition is complete
What is actually happening?
destroyed hook is executed before transition is complete
https://forum.vuejs.org/t/vue-destroys-components-on-a-page-when-they-are-still-needed/20560/4
The text was updated successfully, but these errors were encountered: