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

【问题标题】：Nuxt.js page transitions, @leave never executingNuxt.js 页面转换，@leave 永远不会执行
【发布时间】：2018-12-11 09:51:35
【问题描述】：

我正在尝试使用 nuxt 和 Greensock (gsap) 进行页面转换，但似乎无法正常工作。我不想只使用 css 为页面过渡设置动画，因为我想轻松地将动画链接到不同的元素上。

以前，我可以简单地使用 Vue：

<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
    }
  }
}

现在，使用 Nuxt，我似乎无法让它工作。我在 layouts/default.vue 中使用完全相同的代码。除了我用<nuxt/>替换<router-view/>。

“enter”、“beforeEnter”方法工作正常。它会在初始页面加载以及我更改页面的任何时候被调用。 但是，“离开”方法永远不会被调用。

我不明白什么？我只需要一个地方来使用 javascript 管理我的所有页面转换。我已经在谷歌上搜索了一段时间，看了很多例子，我似乎无法弄清楚我做错了什么。

【问题讨论】：

标签： javascript vue.js transition nuxt.js gsap

【解决方案1】：

花了一段时间试图解决同样的问题，据我所知，您不能使用 <transition> 组件来指定围绕 <nuxt/> 组件的 JS 挂钩回调，可能是由于 Nuxt 处理路由的方式不同。

您需要在每个页面上定义transition property，其中enter() 和leave() 特定于该特定页面。例如，如果您在主页上并导航到关于页面，主页的leave()和关于的enter() 都会触发。

您可以使用mixin 来简化向不同页面添加不同的过渡：

~/mixins/transitions.js

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

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

组件

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

export default {
  mixins: [
    typeA
  ]
}

您也可以在nuxt.config.js 中定义default transition，但您只能访问页面元素，这可能不适合更复杂的过渡。

【讨论】：

【解决方案2】：

我遇到了同样的问题，我关注了@mstslv 并在页面组件上使用了转换属性，这是迄今为止获得正确结果的最佳解决方案。例如，您可以通过检查this.$route.path 以编程方式进行转换。

如果要避免冗余，可以使用以下代码

import transition from "~/plugins/transitions"

export default {
..
transition,
..
}

【讨论】：