nuxt页面切换效果

Posted lewis-messi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxt页面切换效果相关的知识,希望对你有一定的参考价值。

一、nuxt页面默认切换过渡效果名称为page

如果想让每一个页面的切换都有淡出 (fade) 效果,我们需要创建一个所有路由共用的 CSS 文件。所以我们可以在 assets/ 目录下创建这个文件:

在全局样式文件 assets/main.css 里添加一下样式:

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

然后添加到 nuxt.config.js 文件中:

module.exports = {
  css: [
    ‘assets/main.css‘
  ]
}

二、给指定页面添加特定过渡效果

如果想给某个页面自定义过渡特效的话,只要在该页面组件中配置 transition 字段即可:

在全局样式 assets/main.css 中添加一下内容:

.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}

然后我们将页面组件中的 transition 属性的值设置为 test 即可:

export default {
  transition: ‘test‘
}

 

以上是关于nuxt页面切换效果的主要内容,如果未能解决你的问题,请参考以下文章

nuxt实现全局状态管理导航切换优化

12个用得着的 JQuery 代码片段

nuxt.js1-5

在 Nuxt 中切换导航动画

Nuxt的路由动画效果

Nuxt i18n 在语言切换时重置数据对象