Question

我正在尝试使用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 中使用了完全相同的代码。除了我将<router-view/>替换为<nuxt/>。

“ enter”，“ beforeEnter”方法可以正常工作。在初始页面加载时以及在我更改页面时都会调用它。 但是，永远不会调用“ leave”方法。

我不明白什么？我只需要一个位置即可使用javascript管理所有页面转换。我已经搜索了一段时间，浏览了许多示例，似乎无法弄清楚自己在做错什么。

Answer 1

花了一段时间尝试解决相同的问题，据我所知，您不能使用<transition>组件在<nuxt/>组件周围指定JS钩子回调，大概是由于Nuxt处理路由的方式不同。

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

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

Answer 2

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

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

import transition from "~/plugins/transitions"

export default {
..
transition,
..
}

Nuxt.js页面转换，@ leave从不执行

2 个答案: