Nuxt.js设置页面跳转过渡动画（基于Vue.js）

Nuxt.js设置页面跳转过渡动画（基于Vue.js）

一，全局动画（针对所有页面）
1，在assets文件夹中‘建立一个css文件夹，并且建立一个animation.css文件，过度代码如下：

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

.page-enter, page-leave-active{
    
    
opacity: 0;
}
/*局部样式*/
.test-enter-active, .test-leave-active {
    
    
  transition: all 2s;
  font-size: 12px;
}

2，在nuxt.config.js文件中配置css样式如下：

 css: [
    '~as sets/css/animation.css',
],

二，局部动画（针对一个页面即组件）
1，在assets文件夹中‘建立一个css文件夹，并且建立一个animation.css文件（同上↑），过度代码如下：

.test-enter-active, .test-leave-active {
    
    
  transition: all 2s;
  font-size: 12px;
}

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

}

2，在nuxt.config.js文件中配置css样式如下：

 css: [
    '~as sets/css/animation.css',
],

3.在需要动画的组件（页面）中添加代码如下：

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

参考原：https://zh.nuxtjs.org/guide/routing#过渡动效