自定义loading效果时使用less时用loop循环函数设置animation-delay动画延迟失效的问题

记录一个小问题 自定义一个loading效果 使用loop循环demo

使用less 自定义动画loading时设置的循环函数时animation-delay无效，想设置出循环时后一位循环数比前一位迟一点触发来展示loading效果交替的感觉

定义lessn内部变量

@ballSize:10px;//小球尺寸
@containerSize:150px;//容器尺寸
@n :36;//小球数量
@pdeg:360deg / @n;//每一次旋转的角度
@ani-duration :2s;//

定义循环函数 循环loading需要的小球 并设置小球循环后的位置

注意：此时循环函数内部的主体：如果.dot的样式写的时候包裹在.loading里 循环时要带上父级class 否则无效！！！

（此时我的.dot放在了.loading里面，所以我必须两边对应上）

 

 

//循环函数
.loop(@i) when(@i <= @n){
   .loading .dot:nth-child(@{i}){
       transform:rotate( @pdeg * @i ) translateY(-@containerSize / 2);
       //设置动画延迟
        &::before,
        &::after{
             animation-delay: -@ani-duration / @n * @i *6 ; //动画延迟时间 动画时间除以小球数量 乘每轮延迟数量 = 小球的间隔时间乘第几个小球
         }
    }
    .loop(@i+1)
}
.loop(1);

loading为外层盒子  .dot为内部小球盒子 设置好动画给到内部小球

.loading {
    width: @containerSize;
    height: @containerSize;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    perspective: 70px;
    transform-style:preserve-3d ;
    // border: 1px solid #fff;

    .dot{
         position: absolute;
         left: 50%;
         right: 50%;
         width: @ballSize;
         height: @ballSize;
         margin-left: -@ballSize / 2;
         margin-top: (@containerSize - @ballSize) / 2 ;
        //  background: red;
         &::before,&::after{
             content: '';
             position: absolute;
             width: 100%;
             height: 100%;
             border-radius: 50%;
         }
          &::before{
            background-color: #000;
            top: -100%;
            animation: moveBlack @ani-duration infinite;
            // animation-delay : 6s;

          }
          &::after{
            background-color: #fff;
            top: 100%;
            animation: moveWhite @ani-duration infinite;

          }
    }
}
//黑球运动动画
@keyframes moveBlack{
    0%{
        animation-timing-function: ease-in;//规定动画的过渡曲线 由慢变快
    }
    25%{
     transform: translate3d(0,100%,@ballSize);
     animation-timing-function: ease-out;//规定动画的过渡曲线 由快变慢
    }
    50%{
     transform: translate3d(0,200%,0);
     animation-timing-function: ease-in;
    }
    75%{
     transform: translate3d(0,100%,-@ballSize);
     animation-timing-function: ease-out;
    }
}
//白球运动动画
@keyframes moveWhite{
    0%{
        animation-timing-function: ease-in;//规定动画的过渡曲线 由慢变快
    }
    25%{
     transform: translate3d(0,-100%,-@ballSize);
     animation-timing-function: ease-out;//规定动画的过渡曲线 由快变慢
    }
    50%{
     transform: translate3d(0,-200%,0);
     animation-timing-function: ease-in;
    }
    75%{
     transform: translate3d(0,-100%,@ballSize);
     animation-timing-function: ease-out;
    }
}