Как сработать несколько задержек анимации в Sass?

Question

Мне было интересно, как я могу рассчитать две задержки анимации (постепенное увеличение и уменьшение), используя цикл for в Sass.

Придумал следующее, но не знает, как рассчитать второезадержка анимации.

@for $i from 1 through 2 {
    .text:nth-child(#{$i}) {
        animation-delay: ($i * 0.5s), 4s;
    }
}

Я бы хотел сделать то же самое для постепенного появления, поэтому каждый текстовый элемент будет слегка шататься.

Уже пробовал что-то подобное, но безрезультатно.

@for $i from 1 through 2 {
    .text:nth-child(#{$i, $a}) {
        animation-delay: ($i * 0.5s), ($a * 0.5s);
    }
}

А как я могу использовать последнюю задержку, чтобы запустить другую задержку другой анимации?

Answer 1

Я не совсем уверен, чего вы пытаетесь достичь.

Простая версия

Тем не менее, основная идея состоит в том, чтобы делать анимации "in" и "out" в процентах от той же функции анимации.В этом случае build in = 25%, static = 50% и build out = 25%.

Затем ваша продолжительность контролирует, сколько времени занимает выполнение каждой части.В этом случае 2 секунды.

Затем задержка (рассчитанная как часть цикла) смещает анимацию.Вы также можете умножить длительность цикла, чтобы полностью поразить анимацию.

$timeOffset: 0.5s;
$aniLength: 2s;
// 0.5s in, 1s solid, 0.5s out = 2sec

.item {
    opacity:0;
    animation-name: animation;
    animation-duration: $aniLength;
    animation-timing-function: ease-in-out;
}

@for $i from 1 through 20 {
    .item:nth-child(#{$i}){
        // units are in the variable so SCSS just does math
        animation-delay: $i * $timeOffset;
    }
}

@keyframes animation {
    0% {
        opacity: 0;
        transform: translatex(100%);
    }
    25% {
        opacity: 1;
        transform: translatex(0);
    }
    75% {
        opacity: 1;
        transform: translatex(0);
    }
    100% {
        opacity: 0;
        transform: translatex(-100%);
    }
}

Вот пример Codepen , поскольку SO не анализирует SCSS в доступной здесь песочнице кода.

Более сложная версия с несколькими задержками

Ваш второй пример не сработал, потому что вы создавали нечетный селектор в своем коде nth-child при использовании неопределенной переменной.

Кроме того, вы можете сделать довольно сложную математику для каждой итерации.Просто запомните такие понятия, как порядок операций.

Правильный способ указать два различных значения задержки выглядит следующим образом:

@for $i from 1 through 20 {
        // the hash forces SCSS to create a string
    .item:nth-child(#{$i}){
        // you need to use $i for BOTH since its the only defined increment
        animation-delay: $i * $timeOffset, $i * $timeOffset + $aniLength;
        // delay #1 = iteration * 0.5s, delay #2 = iteration * 0.5s + 2s (run at end of animation plus the offset)
    }
}

Answer 2

Вы можете установить @if, @for, @each и @ while в файле SCSS.См. my jsfiddle для анимации затухания для циклов.

@for $i from 1 through 10 {
  .div-wrapper {
     div:nth-child(#{$i}) {
      transition: all $i/3 +s;
      transition-delay: $i/3 +s;
    }
   }
}

Пример: https://jsfiddle.net/hardyrajput/nt6p9hs2/29/

Ссылка: http://thesassway.com/intermediate/if-for-each-while