Nuxt 过渡效果配置

原创

KID.

发布于 2023-10-30 10:03:02

3050

发布于 2023-10-30 10:03:02

文章被收录于专栏：Coooooooooode！（前端）Coooooooooode！（前端）

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

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

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

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

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

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

<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

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

全局样式效果

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

nuxt.js