Nuxt的路由動畫效果

Nuxt.js提供兩種方法為路由提供動畫效果，一種是全局的，一種是針對單獨頁面的

 

全局動畫默認使用page來進行設置，例如現在我們為每個頁面都設置一個進入和退出時的漸隱漸現的效果。我們可以先在根目錄的assets/css下建立一個main.css文件。

/assets/css/main.css(沒有請自行建立)

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

然后在nuxt.config.js里加入一個全局的css文件就可以了。

 

css:['assets/css/main.css'],

 

頁面單獨設置特殊的效果時，我們只要在css里改變默認的page，然后在頁面組件的配置中加入transition字段即可。例如，我們想給commodity頁面加入一個字體放大然后縮小的效果，其他頁面沒有這個效果。

在全局樣式assets/main.css 中添加以下內容。

.commodity-enter-active, .commodity-leave-active {
    transition: all 2s;
    font-size:12px;

}
.commodity-enter, .commodity-leave-active {
    opacity: 0;
    font-size:40px;
}

然后在commodity/index.vue組件中設置

export default {
  transition:'test'
}