如何在Sass中错开多个动画延迟？

Question

我想知道如何通过在Sass中使用for循环来计算两个动画延迟（淡入和淡出）。

提出了以下建议，但不知道如何计算第二个动画延迟。

@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

我不确定你到底想实现什么目标。

简单版本

也就是说，基本思想是将“入”和“出”动画作为同一动画函数的百分比来制作。在本例中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)
    }
}