Question

我有5个带.intro-items类的元素，我希望它们每个都比第一个元素具有.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规范，对于任何时间值，数字和单位之间应该没有空格。

引用MDN：

CSS数据类型表示以秒或毫秒表示的时间维度。它们由一个紧随其后的单元组成。与任何CSS维度一样，单位字面值与数字之间没有空格。

较少 - 以下是您用于设置延迟值的较少代码。

animation-delay         : @delay s;

已编译的CSS - 编译上面的Less代码时，您将获得以下CSS。

animation-delay: 2 s;

由于上面一行中有空格，输出CSS在数字和单位之间也有一个额外的空格。即使实际的数学运算正常，这也会导致问题。以下代码段使用原始代码生成的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>

解决方案是什么？

有一些可能的解决方案来避免它们之间的空间，它们如下：

选项1 - 与1s相乘

.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）变量中设置单位（贷记为seven-phases-max）

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

下面的代码段是使用上面使用上面的Less代码生成的CSS创建的。

.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>

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

1 个答案: