Nuxt.js学习(四) --- Nuxt.js过渡动效

[TOC]

1、Nuxt.js过渡动效

1.1、官方文档：

Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。

也称为页面的更换效果，Nuxt.js提供两种方法为路由提供动画效果，一种为全局，一种针对单独页面制作。

全局过渡动效设置

如果想让每一个页面的切换都有淡出 (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'
}

1.2、实际操作(练习实例)

要求：给news页面加入一个字体放大缩小效果

1.2.1、在全局样式 assets/main.css 中添加内容：

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

1.2.2、在pages/news中设置

export default {
  transition:'test'
}

1.3、测试：点击NEWS，当前页面(/pages/index.vue)内容字体放大缩小