【nuxt3】nuxt3页面跳转过渡效果实现

NUXT3系列 文章目录

【nuxt3】项目中使用svg 7步带你了解https://blog.csdn.net/weixin_49014702/article/details/128414398?spm=1001.2014.3001.5502

文章目录

• 系列文章目录
• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

一、在Vue和NUXT中使用transition的区别

在vue项目中 我们通常是使用<transition></transition>包裹需要过渡效果的

而在nuxt3中 transition 已经内置

Nuxt 利用 Vue 的 <过渡> 组件在页面和布局之间应用过渡。

二、页面过渡

如果想在全局页面跳转时给他个过渡效果 则可以在 nuxt.config.ts 中增加如下代码。它会自动应用过渡效果。

注意：如果要更改布局和页面，则在此处设置的页面过渡将不会运行。相反，您应该设置布局过渡。

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

 并在assets 文件夹中建立 index.scss 文件 （此处可自定义)

然后在nuxt.config.ts的css中引入

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

export default defineNuxtConfig({
  css: ['@/assets/index.scss'],
})

 三、布局过渡

如果想在布局过渡跳转时给他个过渡效果 则可以在 nuxt.config.ts 中增加如下代码。它会自动应用过渡效果。

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

 其他步骤与页面过渡一样