时间戳

首页 > 解决方案 > 如何在 Sass 中错开多个动画延迟？

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

问题描述

我想知道如何通过在 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);
    }
}

以及如何使用最后一个延迟来启动另一个动画的另一个延迟？

标签： cssfor-loopsass

解决方案

我不确定你想要完成什么。

简易版

也就是说，基本思想是将“输入”和“输出”动画作为相同动画功能的百分比。在这种情况下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)
    }
}

推荐阅读