nuxt.js1-5

Posted 2020-11-07 小凡的耿

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