全局 pageTransition 挂钩不起作用 - Nuxt 3

Question

我想为

pageTransition

文件的每一页运行

nuxt.config.ts

挂钩，但挂钩不起作用！！

页数：

/测试：

<script setup lang="ts"></script>

<template>
  <div>
    <h1>Test Page</h1>
    <NuxtLink to="/test2">test2</NuxtLink>
  </div>
</template>

/测试2：

<script setup lang="ts"></script>

<template>
  <div>
    <h1>Test 2 Page</h1>
    <NuxtLink to="/test">test</NuxtLink>
  </div>
</template>

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: false },
  nitro: {
    static: true,
  },
  app: {
    pageTransition: {
      name: "page",
      mode: "in-out",
      onEnter(el, done) {
        console.log("enter");
        done();
      },
      onLeave(el, done) {
        console.log("leave");
        done();
      },
    },
  },
});

onEnter

和

onLeave

不起作用。

它也不适用于布局。我希望它在某些页面上运行，而不是在所有页面上运行。

Answer 1

全局页面转换可以通过使用 CSS 来实现，CSS 将通过 CSS 选择器应用于每个页面，这既是性能也是 CSS 的预期用法。

您可以设置一些全局值，如下所示

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in' // default
    },
    layoutTransition: {
      name: 'slide',
      mode: 'out-in' // default
    }
  }
})

但是你仍然需要在某处编写一个全局CSS文件来定义这个动画。

最简单的方法是使用

app.vue

中所写的内容来获得全局的东西。

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

JavaScript 钩子并不意味着是全局的，因为它们需要使用一些查询选择器。由于 Vue/Nuxt 的状态性质，这不是 JS 的正确用法。

您同时可以使用它们进行日志记录、触发特定操作等...

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

但这些

不是意味着在这种情况下进行过渡。 VueJS 应用程序可能还不错，但为什么要在发生水合作用的同构环境中使用 JS 进行转换呢？这只是自找痛苦而已。

当然，如果您使用 GSAP 或其他东西，那么这样做是有意义的，但它将是逐页的基础或具有全局初始化的上层布局转换。我认为这不是您在这个问题中所要求的，否则会提到它。