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