Nuxt的路由动画效果

Posted 2021-03-07 hspl

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