【nuxt3】nuxt3 page jump transition effect realization

NUXT3 series article directory

[nuxt3] 7 steps to use svg in the project to show you https://blog.csdn.net/weixin_49014702/article/details/128414398?spm=1001.2014.3001.5502

Article Directory

• Series Article Directory
• foreword
• 1. What is pandas?
• 2. Use steps
  • 1. Import library
  • 2. Read data
• Summarize

---

foreword

1. The difference between using transition in Vue and NUXT

In vue projects, we usually use <transition></transition> to wrap transition effects

In nuxt3, transition is already built-in

Nuxt utilizes Vue's <transition> component  to apply transitions between pages and layouts.

2. Page transition

If you want to give him a transition effect when the global page jumps, you can  add the following code in nuxt.config.ts . It automatically applies transition effects.

NOTE: Page transitions set here will not run if layout and page changes are made. Instead, you should set layout transitions.

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

 And create an index.scss file in the assets folder (here you can customize义)

Then introduce in the css of nuxt.config.ts

//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'],
})

 3. Layout transition

If you want to give him a transition effect when the layout transition jumps, you can  add the following code in nuxt.config.ts . It automatically applies transition effects.

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

 Other steps are same as page transition