Nuxt 过渡效果配置

如果需要炫酷的页面过渡效果可以进行配置和定制

官网提供了transitions进行页面切换过度效果配置

页面级过渡 （vue3项目页面必须有唯一的根节点才会有过渡效果）

nuxt.config.ts 进行配置，对应class名称前缀，和显示方式

代码语言：txt复制

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'app', mode: 'out-in' } // app是对应的class名称前缀，可以字定义
  },
})

这时可以在全局页面中 定义对应的class样式，切换路由就可以看到页面效果

代码语言：txt复制

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

布局过渡

同理 如果做布局过渡，切换布局效果 配置

nuxt.config.ts

代码语言：txt复制

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

全局样式效果

代码语言：txt复制

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

nuxt.js nuxtjs3nuxt vue3 nuxt3 nuxt-transitions

0 人点赞