用于循环动画的 Sass mixin答案

【问题标题】：Sass mixin for looping animations用于循环动画的 Sass mixin
【发布时间】：2019-03-11 15:04:03
【问题描述】：

尝试创建一个 mixin 来循环遍历 .item 的每个 nth-child

这是我下面的内容。

#case-studies .item {
  animation: card__moveIn 2s cubic-bezier(.22,1,.32,1) var(--delay) backwards;

  &:nth-child(1) {
    --delay: 1s;
  }

  &:nth-child(2) {
    --delay: 1.1666666666666665s;
  }

  &:nth-child(3) {
    --delay: 1.3333333333333335s;
  }

  &:nth-child(4) {
    --delay: 1.5s;
  }

  &:nth-child(5) {
    --delay: 1.6666666666666665s;
  }

  &:nth-child(6) {
    --delay: 1.8333333333333335s;
  }

  &:nth-child(7) {
    --delay: 2s;
  }

  &:nth-child(8) {
    --delay: 2.166666666666667s;
  }

  &:nth-child(9) {
    --delay: 2.3333333333333335s;
  }

  &:nth-child(10) {
    --delay: 2.5s;
  }

  &:nth-child(11) {
    --delay: 2.6666666666666665s;
  }

  &:nth-child(12) {
    --delay: 2.8333333333333335s;
  }

  &:nth-child(13) {
    --delay: 3s;
  }
}

我确实在这里看到了类似的东西，How to use SCSS/SASS to increase animation-delay for concurrent divs

【问题讨论】：

标签： sass mixins

【解决方案1】：

您不需要 mixin。@for directive 应该满足您的需求。

#case-studies .item {
  animation: card__moveIn 2s cubic-bezier(.22,1,.32,1) var(--delay) backwards;
}

@for $i from 1 through 13 {
  #case-studies .item:nth-child(#{$i}) {
    --delay: #{(1 + 0.1667 * ($i - 1))}s;
  }
}

You can see the output here

【讨论】：

谢谢，太好了。