寻找一种循环通过Sass动画的方法

Question

有人可以帮助将以下功能转换为Sass循环吗？我认为它非常自我解释：

非常感谢提前

@keyframes slideIn {
    from {opacity:0;transform:translateX(-20px);}
    to {opacity:1;transform:translateX(0px);}
  }  
  &:nth-child(1) {
    animation:slideIn .5s;
  }
  &:nth-child(2) {
    animation:slideIn 1s;
  }
  &:nth-child(3) {
    animation:slideIn 1.5s;
  }
  &:nth-child(4) {
    animation:slideIn 2s;
  }
  &:nth-child(5) {
    animation:slideIn 2.5s;
  }

Answer 1

使用您的示例，您可以使用@for循环。

@keyframes slideIn {
  from {opacity:0;transform:translateX(-20px);}
  to {opacity:1;transform:translateX(0px);}
} 

@for $i from 1 through 5 {
  .class {
    &:nth-child(#{$i}) {
      animation: slideIn ($i * 0.5) + s
    }
  }
}

编译为

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
.class:nth-child(1) {
  animation: slideIn 0.5s;
}

.class:nth-child(2) {
  animation: slideIn 1s;
}

.class:nth-child(3) {
  animation: slideIn 1.5s;
}

.class:nth-child(4) {
  animation: slideIn 2s;
}

.class:nth-child(5) {
  animation: slideIn 2.5s;
}