简单的 Nuxt 3 页面转换不起作用

Question

我正在发现 Nuxt 3，并且只是想在页面之间制作动画。这个想法是使用 javascript hooks 使用 js 库（例如 gsap 或 AnimeJs）进行页面转换。

因此，在我的

app.vue

文件中，我只需将

<NuxtPage/>

放入

<Transition>

元素中，如下所示：

<NuxtLayout>
    <Transition>
        <NuxtPage/>
    </Transition>
</NuxtLayout>

我的 vue 页面（'./pages/index.vue' 和 './pages/project/myproject.vue'）如下所示：

<template>
    <div>
        <h1>My Project</h1>
    </div>
</template>

<script setup>
function onEnter(el, done) {
    done()
}
function onLeave(el, done) {
    done()
}
</script>

我遵循了 Nuxt 3 和 Vue 3 文档：

https://v3.nuxtjs.org/guide/directory-struct/pages#layouttransition-and-pagetransition

https://vuejs.org/guide/built-ins/transition.html#javascript-hooks

我也在github上阅读了这个帖子，但我找不到答案： https://github.com/nuxt/framework/discussions/851

当我使用 Nuxt 2 时，我只需要像这样将过渡对象放入我的页面中，它就可以正常工作：

<script>
export default {
    // ... (datas, methods)
    transition: {
        mode: "in-out",
        css: false,
        enter(el, done) {
            console.log("enter");
            done()
        },
        leave(el, done) {
            console.log("leave");
            done()
        }
    }
}
</script>
<template>
    <div>
        <h1 class="text-center text-5xl">Hello World</h1>
    </div>
</template>

你知道如何实现它吗？

Answer 1

只需遵循Nuxt 3 的官方文档。您需要将以下代码添加到您的

nuxt.config.ts

文件中：

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

然后应用

app.vue

文件中的类，如下所示：

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

Nuxt 3 在底层使用了 Vue 的

<Transition>

组件，因此您无需将其添加到模板中。

小心 css 前缀。

Answer 2

如果转换不适合您，请记住

App.vue

中的 <style> 标签不能有

scoped

属性。

Answer 3

nuxt 3 不支持布局/页面中的

transition

标签。 根据 Nuxt.js 文档，对于页面转换，您必须首先将以下代码添加到 nuxt.config.ts 以对所有页面应用自动转换：

export default defineNuxtConfig({
   app: {
       pageTransition: { name: 'page', mode: 'out-in' }
   },
})

然后，要开始在页面之间添加过渡，请将以下 CSS 添加到您的 app.vue：

style

不属于范围。

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

Answer 4

如何使用组件？

<!--components/im/index.vue-->
<template>
    <ClientOnly>
        <Transition name="fade">
            <div>test</div>
        </Transition>
    </ClientOnly>
</template>
<script setup>

</script>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>

Answer 5

Nuxt 3 不需要页面/布局的

<Transition>

包装器，默认情况下它会为你做到这一点。 看看这个入门模板：在

assets/sass/app.scss

中，样式的最后一部分是页面和布局过渡。
您可以调整默认命名的动画（

page-

和

layout-

）。
更多信息这里