我发现了Nuxt 3,我只是想在页面之间做一个动画,我的想法是使用javascript钩子,通过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-structure/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>
你有什么想法如何实现它?
2条答案
按热度按时间yh2wf1be1#
Nuxt 3不需要
<Transition>
Package 页面/布局,默认情况下它会为你做这些。在assets/sass/app.scss
中,样式的最后一部分是页面和布局过渡。可以调整默认命名动画(
page-
和layout-
)。更多信息here
n1bvdmb62#
只需按照Nuxt 3的官方文档操作即可。您需要将以下代码添加到
nuxt.config.ts
文件中:然后在
app.vue
文件中应用这些类,如下所示:Nuxt3在底层使用了Vue的
<Transition>
组件,因此您不需要将其添加到模板中。小心css前缀。