Leave transition hook is called on one page when it's in fact another page leaving #2669
Description
If contact.vue doesn't have a leave transition hook, index.vue's leave transition hook is called when contact page is leaving. I believe index page's leave transition hook should not be called in this case. It seems like a bug.
If I add the leave hook to contact.vue, leaving the contact page calls the contact's leave instead of the index one (correct behavior).
In other words, I believe el should always return the current page. Am I wrong?
pages/index.vue
<div ref="bg" class="page-home__bg"></div>
<div ref="intro-title" class="page-home__intro-title">
<h1>Crafting the web</h1>
</div>
transition: {
appear: true,
css: false,
mode: 'out-in',
enter(el, done) {
let title = el.querySelectorAll('.page-home__intro-title')[0]
let bg = el.querySelectorAll('.page-home__bg')[0]
Velocity(title, { translateX: [0, -100] }, { duration: 500 })
Velocity(bg, { scale: [1, 1.3], opacity: [1, 0] }, { duration: 500, complete: done })
},
leave(el, done) {
let title = el.querySelectorAll('.page-home__intro-title')[0]
let bg = el.querySelectorAll('.page-home__bg')[0]
Velocity(title, { translateY: '-100px' })
Velocity(bg, { translateY: '-100px', opacity: 0 }, { complete: done })
}
}
pages/contact.vue
<div>
<h1>Contact</h1>
</div>
transition: {
appear: true,
css: false,
mode: 'out-in',
enter(el, done) {
done()
}
}