压缩类并更改属性

Question

我有一个有5个状态(0 - 5)的圆环图。我在一个Vue应用程序中使用它，圆环图的状态根据信息而变化。

我已经创建了5个类来表示图表的5个步骤。步骤0= 0%，步骤1= 20%，依此类推。svg元素接受一个stroke-dasharray属性，这显示了图表被填充的程度。

因此，我为这些步骤创建了5个css类：

.donut-segment-0 {
    animation: donut0 1s;
}

@keyframes donut0{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 0, 100;
    }
}

.donut-segment-1 {
    animation: donut1 1s;
}

@keyframes donut1{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 20, 80;
    }
}

.donut-segment-2 {
    animation: donut2 1s;
}

@keyframes donut2{
    0% {
        stroke-dasharray: 20, 80;
    }
    100% {
        stroke-dasharray: 40, 60;
    }
}

.donut-segment-3 {
    animation: donut3 1s;
}

@keyframes donut3{
    0% {
        stroke-dasharray: 40, 60;
    }
    100% {
        stroke-dasharray: 60, 40;
    }
}

.donut-segment-4 {
    animation: donut4 1s;
}

@keyframes donut4{
    0% {
        stroke-dasharray: 60, 40;
    }
    100% {
        stroke-dasharray: 80, 20;
    }
}

.donut-segment-5 {
    animation: donut5 1s;
}

@keyframes donut5{
    0% {
        stroke-dasharray: 80, 20;
    }
    100% {
        stroke-dasharray: 100, 00;
    }
}

我想知道是否有可能简化一下这个问题。这里面有一个简单的逻辑。在每个步骤中，我将stroke-daskarray更改为20，并调用特定的动画。

Answer 1

我花了一点时间，但还是弄明白了：

@for $i from 0 through 5 {
  .donut-step-#{$i} {
    animation: donut-#{$i} 1s;
  }

  @keyframes donut-#{$i} {
    0% {
        stroke-dasharray: ($i - 1) * 20, 100 - (($i - 1) * 20);
    }
    100% {
        stroke-dasharray: $i * 20, 100 - ($i * 20);
    }
  }
}