Nuxt.js 页面转换，@leave 永远不会执行

Question

I'm trying to have page transitions using with nuxt and Greensock (gsap), I can't seem to get it working. I don't want to animate page transitions using css only, because I want to easily chain animations on different elements.

Previously, with Vue I could simply use:

<transition @enter="enter" @leave="leave" appear mode="out-in">
  <router-view />
</transition>

export default {
  methods: {
    enter(el, done) {
      console.log('enter');
      // ... gsap animation code
    },
    leave(el, done) {
      console.log('leave');
      // ... gsap animation code
    }
  }
}

Now, with Nuxt, I can't seem to get it working. I use the exact same code in layouts/default.vue . Except I replace <router-view/> with <nuxt/> .

The "enter", "beforeEnter" methods works fine. It gets called on the initial page load, as well as anytime I change pages. However, the "leave" method never gets called.

What am I not understanding? I just need one place to manage all of my page transitions with javascript. I've been googling for a while now, looking through lots of examples, I can't seem to figure out what I'm doing wrong.

Answer 1

Spent a while trying to solve the same problem, and as far as I can tell you can't use the <transition> component to specify JS hook callbacks around a <nuxt/> component, presumably due to Nuxt handling routing differently.

You need to define the transition property on each page, where enter() and leave() are specific to that particular page . For example, if you are on the Home page and navigate to the About page, Home's leave() and About's enter() will both trigger.

You can use a mixin to simplify adding different transitions to different pages:

~/mixins/transitions.js

export const typeA = {
  transition: {
    ...
  }
}

export const typeB = {
  transition: {
    ...
  }
}

Component

import { typeA } from '~/mixins/transitions'

export default {
  mixins: [
    typeA
  ]
}

You can also define a default transition in nuxt.config.js , but you will only have access to the page element, which might not be suitable for more complex transitions.

Answer 2

I had the same issue, I followed @mstslv and used transition property on page components, it's the best solution so far to get proper results. You can programmatically do transitions by checking this.$route.path for instance.

If you want to avoid redundancy, you can use the following code

import transition from "~/plugins/transitions"

export default {
..
transition,
..
}