1、页面淡入淡出

	在assets/css/transition.css   定义全局css

	//动画形式

	.page-enter-active,.page-leave-active{

		transition:opacity 0.5s

	}

	//入 出

	.page-enter,.page-leave-active{

		opacity 0

	}




	在nuxt.config.js 

	css:[

		‘assets/css/transition.css’

	]

2、页面滑入滑出

	export default{

		transition:"test"  //定义动画名称

	}

	css

	.test-enter-active,.test-leave-active{

		transition:0.5s ease all;

	}

	.test-enter,test-leave-active{

		margin-left:1000px;

	}




3、loading

系统自带的 页面加载效果，是设置页面顶部的一个加载滚动条。

直接修改nuxt.config.js

loading:{

	color:"#399",height:"3px"   //顶部的滚动跳样式

}




4、指定loading组件

	创建 comonents/loading.vue

	<div v-if="laoding"></div>

	export default{

			data:()=>({

				loading:false

			}),

			methods:{

				start(){

					this.loading=true

				},

				finish(){

					this.loading=false;

				}

			}

	}

	配置nuxt.config.js

	loading:"~/components/loading.vue"