css - 如何在 LESS 中设置关键帧名称

Question

我尝试为 CSS 动画关键帧设置这个 LESS mixin:

.keyframes(@name, @from, @to) {;
  @-webkit-keyframes "@name" {
    from {
      @from;  
    }
    to {
      @to;
    }
  }
}

但是 name pharse 有一些问题，有没有办法正确地做到这一点？

Answer 1

从 LESS >= 1.7 开始，您可以为关键帧关键字(名称)使用变量。

LESS 1.7 中对指令的工作方式进行了一些更改，允许使用变量作为 @keyframes 的名称/关键字(因此问题中的示例现在应该可以使用)。

---

Unfortunately keyframes names can not be dynamically generated in LESS <= 1.6

因此，处理关键帧的正常方法是使用硬编码的名称，您只需调用特定的“for”和“to”mixins，如下所示:

.colors-mixin-frame(@from,@to){
from {color: @from;}
to {color: @to;}
}

.width-mixin-frame(@from,@to){
from {width: @from;}
to {width: @to;}
}

// keyframes with hardcoded names calling for specific mixin frames
@keyframes red-blue { .colors-mixin-frame(red, blue); }
@keyframes change-width { .width-mixin-frame(254px, 512px); }

---

但您可以使用变通方法动态生成名称

在将名称注入(inject)规则名称的位置，这需要在关键帧声明末尾声明下一个提供右括号 的规则。最方便的是如果你只是构建调用那个关键帧的动画

.animation-keyframes(@name, @from, @to, @anim-selector) {
  @keyf: ~"@keyframes @{name} { `'\n'`from ";
  @anim: ~"} `'\n'`.@{anim-selector}";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
  @{anim} {
    animation-name:@name;
  }
}

请注意，您还需要定义 .from(){} 和 .to(){} 混入，而不仅仅是使用 @from 和 @to 就像你在你的例子中所做的那样(因为 LESS 也不允许动态生成的属性)......这个混合现在可以构造所需的属性和值......使用特定的属性你可以像这样使用守卫或特定于名称的混入:

// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
} 

现在我们可以在 LESS:

中调用我们的 mixin

// test
.animation-keyframes (colors, red, blue, my-colanim);

并获取CSS:

@keyframes colors { 
from {
  color: #ff0000;
}
to {
  color: #0000ff;
}
} 
.my-colanim {
  animation-name: colors;
}

这也适用于 LESS 1.4，但请注意，我们使用 javascript 插值换行，这需要 LESS 的 javascript 实现。

---

编辑:关于前缀的附加问题

与供应商前缀混合

这里我制作了两个 mixin ...一个没有供应商前缀，一个有它们都调用通用 .keyframes mixin:

.keyframes (@name, @from, @to, @vendor:"", @bind:"") {
  @keyf: ~"@{bind}@@{vendor}keyframes @{name} { `'\n'`from ";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
}

.animation-keyframes-novendor (@name, @from, @to, @anim-selector) {
  .keyframes (@name, @from, @to);
  @anim: ~"} `'\n'`.@{anim-selector}";
  @{anim} {
    animation-name:@name;
  }
}

.animation-keyframes (@name, @from, @to, @anim-selector) {
  @bind: "} `'\n'`";
  .keyframes (@name, @from, @to, "-moz-");
  .keyframes (@name, @from, @to, "-webkit-", @bind);
  .keyframes (@name, @from, @to, "-o-", @bind);
  .keyframes (@name, @from, @to, "-ms-", @bind);
  .keyframes (@name, @from, @to, "", @bind);
  @anim: ~"} `'\n'`.@{anim-selector}";
  @{anim} {
    -moz-animation: @name;
    -webkit-animation: @name;
    -o-animation: @name;
    -ms-animation: @name;
    animation: @name;
  }
}

.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
}

/* keyframes with all vendor prefixes */
.animation-keyframes (colors, red, blue, my-colanim);

/* keyframes with no vendor prefix */
.animation-keyframes-novendor (colors, red, blue, my-colanim);

.animation-keyframes 现在将为所有供应商前缀和带有供应商前缀属性的动画选择器生成关键帧。正如预期的那样，.animation-keyframes-novendor 提供与上述简单解决方案相同的输出(没有供应商前缀)。

---

一些注意事项:

• 为了使您的动画真正起作用，您需要设置其他动画参数，例如计时函数、持续时间、方向、迭代次数(除了我们已经设置的名称之外，至少还需要一个持续时间)。

  例如:

   animation: @name ease-in-out 2s infinite alternate;

• 如果您将上述 mixin 包装在 namespace 中，请确保将其他 mixin 中的 mixin 引用更改为它们的整个路径(包括 namespace )。

  例如:

   #namespace > .keyframes () // see .less source in the demo for details