css - 如何在 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 example因为 SO 不会在此处可用的代码沙箱中解析 SCSS。

具有多个延迟的更复杂版本

你的第二个例子没有工作，因为你在你的 nth-child 代码中构建了一个奇怪的选择器，同时使用了一个 undefined variable 。

此外，您可以为每次迭代进行非常复杂的数学运算。只需记住操作顺序等概念即可。

指定两个不同延迟值的正确方法是这样的:

@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)
    }
}