实用的CSS动画与应用后置 store.commit('UPDATE_LOADING', { isLoading: fa

loading加载小动画

代码(less)

    .loading {
      position: absolute;
      z-index: 1000;
      bottom: 40vh;
      right: 40vw;
      width: 100px;
      height: 100px;
      border-top: 6px solid #CC6699;
      border-radius: 50%;
      border-color: #CC6699 #0fd #FFCC66; // 三个属性，上 左右 下。
      box-sizing: border-box;
      line-height: 100px;
      text-align: center;
      animation: rotated 1s linear 0s infinite normal both;
    
      @keyframes rotated {
        from {
          transform: rotate(0deg);
        }
    
        to {
          transform: rotate(360deg);
        }
      }
    
      span {
        display: block;
        animation: rotated 1s linear 0s infinite reverse both;
      }
    
      &:before,
      &:after {
        content: "";
        position: absolute;
        top: -6px;
        left: 0;
        border-top: 6px solid #99cc33;
        height: 100px;
        width: 100px;
        box-sizing: border-box;
        border-radius: 50%;
        transform: rotate(120deg);
      }
    
      &:after {
        transform: rotate(240deg);
        border-color: #0066FF;
      }
    }

要点

@keyframes定义动画，from开始to结束一周内旋转
伪元素::before,::after和旋转transform构造原型弧度边框，其中top：-6px;代表向外凸出圆弧

animation(name duration timing-function delay iteration-count direction fill-mode play-state)

@ name 动画名称
@ duration 动画持续时间
@ timing-function 动画执行周期的速度规律，常用ease-in ，ease等
@ delay 动画启动延迟
@ iteration-count 动画次数
@ direction 动画执行方向
@ fill-mode 控制动画开始和结束时的属性

@ play-state 暂停或持续

fill-modes属性

 animation-fill-mode属性可以接受none、forwards、backwards或者both四个值中的一个值，着重记一下，之前不太理解,根本是为了动画衔接时候的展示状态和等待状态。

animation-fill-mode : none | forwards | backwards | both;

默认情况之下，只有在动画进行状态，才会应用@keyframes所声明的动画；而在动画等待和动画结束状态，对元素样式并不会产生任何的影响。所以才需要此属性

值	描述
none	不改变默认行为,一般用不到
forwards	动画在结束时给元素应用到的样式，元素为动画最后一帧to(100%)时候的样子
backwards	动画在开始时的第一帧，元素的样式就是动画刚开始的样子（有时延动画时，等待的时候元素就是动画的开始时候from(0%)的第一帧率时的展示）
both	向前和向后填充模式都被应用。

vue中的应用，需要在vuex中配合使用###
1. 全局路由守卫 前置 store.commit('UPDATE_LOADING', { isLoading: true}) 后置 store.commit('UPDATE_LOADING', { isLoading: false})，可以添加延时，为了缓解异步加载组件的等待。
2. 大组件加载路由，例如Eachat和高德地图的引入也页面，在route中定义meta路由元信息，对路由进行判断。
3. 接口调用时，在异步回调中使用，if(res.response){store.commit('UPDATE_LOADING', { isLoading: true})}，可以缓解接口请求大量数据中加载时长等待。

大概就这样吧，有点累了，下班。

实用的CSS动画与应用

loading加载小动画

代码(less)

要点

fill-modes属性

vue中的应用，需要在vuex中配合使用###