分享：nuxt页面过渡动效设置

原创于 2020-05-19 08:09:36 发布 · 877 阅读

CC 4.0 BY-SA版权

文章标签：

45 篇文章

订阅专栏

39 篇文章

订阅专栏

本文介绍了如何在Nuxt.js中设置页面过渡动效。通过在页面组件内配置transition字段，并在全局样式文件中定义相关动画，可以实现自定义的页面过渡效果。详细配置方法可参考Nuxt的页面过渡效果API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：
在全局样式 assets/main.css 中添加一下内容：

.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}

然后我们将页面组件中的 transition 属性的值设置为 test 即可：

export default {
  transition: 'test'
}

关于过渡效果 transition 属性配置的更多信息可参看页面过渡效果API。