分享：nuxt全局过渡动效设置

全局过渡动效设置

提示 :Nuxt.js 默认使用的过渡效果名称为 page
如果想让每一个页面的切换都有淡出 (fade) 效果，我们需要创建一个所有路由共用的 CSS 文件。所以我们可以在 assets/ 目录下创建这个文件：
在全局样式文件 assets/main.css 里添加一下样式：

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

然后添加到 nuxt.config.js 文件中：

module.exports = {
  css: [
    'assets/main.css'
  ]
}

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