Sass mixin для зацикливания анимации - PullRequest
Новая
       8

Sass mixin для зацикливания анимации

2 голосов
/ 11 марта 2019

Попытка создать миксин для циклического прохождения каждого n-го потомка .item

Вот что у меня ниже. 

#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;
  }
}

Я видел нечто подобное здесь, Как использовать SCSS / SASS для увеличения задержки анимации для одновременных делений

1 Ответ

0 голосов
/ 11 марта 2019

Для этого вам не нужен миксин. @ для директивы должен соответствовать вашим потребностям. 

#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;
  }
}

Вы можете увидеть вывод здесь

...