nuxt.js1-5

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'],

　　這時候在頁面切換的時候就會有2秒鐘的動畫切換效果了，可是你會發現一些頁面是沒有效果的，這是由於你沒有是<nuxt-link>組件來製做跳轉連接。你須要進行更改。

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>

　　改過以後你就會看到動畫效果了。

　單獨設置頁面動效

　　想給一個頁面單獨設置特殊的效果時，咱們只要在css裏改變默認的page，而後在頁面組件的配置中加入transition字段便可。例如，咱們想給about頁面加入一個字體放大而後縮小的效果，其餘頁面沒有這個效果。

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

.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;
    
}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}

　　而後在about/index.vue組件中設置

export default {
  transition:'test'
}