【完美解决】vue+elementUI+axios发送请求出现遮罩层的闪烁问题

思路：利用css3动画，关键在于loading中的customClass中加一个样式，当出现loading的时候让它进行一次过渡如下代码

css代码

.axios-loading,
.axios-loading1{animation:axiosloading 1s;}
.axios-loading2{animation:axiosloading 1s;}
.axios-loading3{animation:axiosloading 2s;}
.axios-loading4{animation:axiosloading 3s;}
.axios-loading5{animation:axiosloading 4s;}
@keyframes axiosloading{
  0%{opacity: 0;}
  99% {opacity: 0;}
  100% {opacity: 1;}
}}

js代码

/*axios请求拦截*/
var loading;
/*开启遮罩*/
function startLoading(showLoadingTime) {
  showLoadingTime=showLoadingTime||"2"

  loading = Loading.service({
    customClass:"axios-loading"+showLoadingTime,
    lock: true,
    text: '加载中……',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}
/*关闭遮罩*/
function endLoading() {
  if (loading) {
    loading.close()
  }
}
var starTimestamp = (new Date()).valueOf();
var endTimestamp = (new Date()).valueOf();
/*showLoadingTime请求几秒未返回值显示Loading*/
axios.interceptors.request.use(function (config) {
  if (config.showLoading) {
    /*开启遮罩*/
    starTimestamp = (new Date()).valueOf();
    startLoading(config.showLoadingTime);
  }
  /*接口请求时间长的时候有个遮罩层*/
  if (!config.headers.Authorization) {
    if (window.userId && window.NickName) {
      config.headers.Authorization = Encrypt(window.userId + "|" + (window.NickName ? window.NickName : ""))
    } else {
      config.headers.Authorization = ""
    }
  }
  return config;
}



axios.interceptors.response.use(function (response) {
  
  if (response.config.showLoading) {
    /*关闭遮罩层*/
    if (loading) endLoading();
  }
})