为什么动画延迟不起作用？

Question

我有 5 个带有 .intro-items class 的元素，我希望每个元素的动画延迟都比第一个元素多 .5s。

我使用了这段代码，但它不起作用。

.animation-delay(@delay) {
-webkit-animation-delay : @delay s;
animation-delay         : @delay s;
}

.generate-delay(4);

.generate-delay(@n, @i: 1) when (@i =< @n) {
  .intro-items:nth-child(@{i}) {

     .animation-delay(@i*.5)
  }
  .generate-delay(@n, (@i + 1));
}

我在CSS

中得到了什么

.intro-items:nth-child(1) {
  -webkit-animation-delay: 0.5 s;
   animation-delay: 0.5 s;
 }
.intro-items:nth-child(2) {
 -webkit-animation-delay: 1 s;
 animation-delay: 1 s;
}
 .intro-items:nth-child(3) {
 -webkit-animation-delay: 1.5 s;
  animation-delay: 1.5 s;
 }
.intro-items:nth-child(4) {
 -webkit-animation-delay: 2 s;
 animation-delay: 2 s;
}

Answer 1

为什么延迟不起作用？

Less循环没有问题。实际问题在于通过代码设置 animation-delay 值的方式以及它与预期值有何不同。

根据 CSS 规范，对于任何时间值，数字和单位之间不应有 space。

Quoting MDN:

The CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.

Less - 以下是您用来设置延迟值的 Less 代码。

animation-delay         : @delay s;

已编译 CSS - 当上面的 Less 代码被编译后你会得到下面的 CSS.

animation-delay: 2 s;

因为你在上面的行中有一个 space，所以输出 CSS 在数字和单位之间也有一个额外的 space。即使实际的数学运算正常工作，这也会导致问题。下面的代码片段使用了由您的原始代码生成的 CSS。

.intro-items:nth-child(1) {
  -webkit-animation-delay: 0.5 s;
  animation-delay: 0.5 s;
}
.intro-items:nth-child(2) {
  -webkit-animation-delay: 1 s;
  animation-delay: 1 s;
}
.intro-items:nth-child(3) {
  -webkit-animation-delay: 1.5 s;
  animation-delay: 1.5 s;
}
.intro-items:nth-child(4) {
  -webkit-animation-delay: 2 s;
  animation-delay: 2 s;
}
.intro-items {
  -webkit-animation: move 2s forwards;
  animation: move 2s forwards;
}
@-webkit-keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(20px);
  }
}
@keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(20px);
  }
}

<div class='intro-items'>Some text</div>
<div class='intro-items'>Some text</div>
<div class='intro-items'>Some text</div>
<div class='intro-items'>Some text</div>

解决方法是什么？

有一些可能的解决方案可以避免中间的 space，它们如下：

选项 1 - 与 1 相乘

.animation-delay(@delay) {
  -webkit-animation-delay : @delay * 1s;
  animation-delay : @delay * 1s;
}

选项 2 - 使用内置的 unit() 函数

.animation-delay(@delay) {
  -webkit-animation-delay : unit(@delay,s);
  animation-delay         : unit(@delay,s);
}

选项 3 - 不是乘以或转换输出值，而是在乘数本身中添加单位。

.generate-delay(@n, @i: 1) when (@i =< @n) {
  .intro-items:nth-child(@{i}) {
    .animation-delay(@i*.5s) /* note the addition of unit */
  }
  .generate-delay(@n, (@i + 1));
}

选项 4 - 您可以在索引 (@i) 变量本身中设置单位（归功于）

.generate-delay(@n, @i: 1s) when (@i =< @n) {
  .intro-items:nth-child(@{i}) {
    .animation-delay(@i*0.5)
  }
  .generate-delay(@n, (@i + 1));
}

以下代码段是使用 CSS 创建的，该 CSS 是使用上述 Less 代码之一生成的。

.intro-items:nth-child(1) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.intro-items:nth-child(2) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.intro-items:nth-child(3) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.intro-items:nth-child(4) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.intro-items {
  -webkit-animation: move 2s forwards;
  animation: move 2s forwards;
}
@-webkit-keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(20px);
  }
}
@keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(20px);
  }
}

<div class='intro-items'>Some text</div>
<div class='intro-items'>Some text</div>
<div class='intro-items'>Some text</div>
<div class='intro-items'>Some text</div>

为什么动画延迟不起作用？

Why is the animation delay not working?

css

less

css-animations