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文件就可以了。

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'delnuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
  },
  css:['~assets/css/normailze.css','~assets/css/main.css'],
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

这时候在页面切换的时候就会有2秒钟的动画效果了，但是你会发现一些页面时没有效果，这是因为你没有使用<nuxt-link>组件来制作跳转链接。你需要进更改。

比如改成如下：

<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>

改过之后你就会看到有动画效果了。

单独设置页面动效
想给一个页面单独设置特殊的效果时，我们只要在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组件中设置

<script>
export default {
    transition:'test'
}
</script>

Nuxt的路由动画效果

猜你喜欢