我想知道如何通过在 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);
}
}
以及如何使用上一个延迟来启动另一个动画的另一个延迟?
最佳答案
我不确定您要完成什么。
简易版
也就是说,基本思想是将“进”和“出”动画作为同一动画函数的百分比。在这种情况下,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)
}
}
关于css - 如何在 Sass 中错开多个动画延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56234208/