Vue加载区域数据时的Loading效果

切换筛选条件和切换后端分页时经常会有一段时间的请求数据时间，哪怕时间再短也是一段时间，这样会造成用户的体验感很差，因此用css3简单做了个加载效果。

具体的代码长这亚子，主要是用了css3  animation属性

animation: zoomL 1.4s ease-in-out infinite alternate; 这里ease-in-out是先慢后快，infinite是无限，alternate是交替

其他两个.loading节点animation-delay: -1s是让他们延迟执行，可以根据自己的需要更改

使用的话就注册为全局组件然后在页面调用就可

这里我通过props传值控制显示隐藏的，供参考

<template>
  <div class="loading-wrapper">
    <div class="loading-content clearfix">
      <div class="loading" style="animation-delay: -1s"></div>
      <div class="loading" style="animation-delay: -0.1s"></div>
      <div class="loading"></div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="scss" scoped>
.loading-wrapper {
  width: 100%;
  position: relative;
  height: 50px;
  .loading-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .loading {
      float: left;
      width: 15px;
      margin-right: 12px;
      height: 15px;
      background: #f62700;
      border-radius: 100%;
      animation: zoomL 1.4s ease-in-out infinite alternate;
    }
  }
}
@keyframes zoomL {
  0%{
    opacity: 0.5;
    transform: scale(2);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
</style>

<template>
  <div>
    <ul class="row">
      <li v-for="item in list" :key="item.id" class="mv-item">
        <div class="cover">
          <span class="play"><i class="iconfont icon-ziyuan">{{item.playCount|handlePlayCount}}</i></span>
          <div class="icon-wrapper">
            <i class="iconfont icon-ziyuan play-button" @click="play(item.id)"></i>
          </div>
          <p class="d-flex j-sb bt-info">
            <span>{{item.artistName}}</span>
            <span>{{item.duration|formatTransitionTime}}</span>
          </p>
        </div>
        <h2 class="my-1">{{item.name}}</h2>
      </li>
    </ul>
    <loading-plus v-if="beforeReady"></loading-plus>
  </div>
</template>
<script>
export default {
  props:{
    list:{
      type:Array,
      default:()=>[]
    },
    beforeReady:{
      type:Boolean,
      default:false
    }
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
  
</style>