nuxt页面切换效果

1、nuxt页面默认切换过渡效果名称为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'
  ]
}

2、给指定页面添加特定过渡效果

若是想给某个页面自定义过渡特效的话，只要在该页面组件中配置 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'
}