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'
}