Static GitHub Issues

[2669] Leave transition hook is called on one page when it's in fact another page leaving

prev: nuxt component should not render the child when the errors happen
next: Nuxt i18n: Text dissapear for first time

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()
    }
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2323">#c2323</a>)</em></sub></div>