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

Question

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

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

但是名称解析存在一些问题,是否有任何选择可以做到这一点？

Answer 1

从LESS> = 1.7开始,您可以使用关键帧关键字(名称)的变量.

在LESS 1.7中对指令如何工作进行了一些更改,允许使用变量作为名称/关键字@keyframes(因此问题中的示例现在应该起作用). DEMO

不幸的是,关键帧名称不能在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); }

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

但是,如果将名称注入规则名称,则需要声明下一个规则,该规则}在关键帧声明的末尾提供结束括号.最方便的是如果你只是构建调用该关键帧的动画

.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也不允许动态生成的属性)...这个mixins现在可以构造所需的属性和值...使用特定属性,您可以使用警卫或特定于名称的混合,如下所示:

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

现在我们可以调用我们的mixin in LESS:

// 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插值换行,这需要jESS的javascript实现.

编辑:关于前缀的其他问题

Mixin与供应商前缀

在这里,我创建了两个mixins ...一个没有供应商前缀,另一个同时调用一般.keyframesmixin:

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

• 如果在命名空间中将mixins包装在上面,请确保将其他mixins中的mixin引用更改为它们的整个路径(包括命名空间).

  例如:

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

DEMO

Answer 2

我目前正在研究mixin库

来源可以在这里找到https://github.com/pixelass/more-or-less

我的关键帧混合看起来像这样：

不到1.7.x的工作

密信

.keyframes(@name) { 
    @-webkit-keyframes @name {
        .-frames(-webkit-);
    }
    @-moz-keyframes @name {
        .-frames(-moz-);
    }
    @keyframes @name {
        .-frames();
    }
}

输入

& {
    .keyframes(testanimation);.-frames(@-...){
        0% {
            left: 0;
            @{-}transform: translate(10px, 20px);
        }

        100% {
            left: 100%;
            @{-}transform: translate(100px, 200px);
        }
    }
}

输出值

@-webkit-keyframes testanimation {
  0% {
    left: 0;
    -webkit-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -webkit-transform: translate(100px, 200px);
  }
}
@-moz-keyframes testanimation {
  0% {
    left: 0;
    -moz-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -moz-transform: translate(100px, 200px);
  }
}
@keyframes testanimation {
  0% {
    left: 0;
    transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    transform: translate(100px, 200px);
  }
}

Answer 3

我认为你应该这样做

@-webkit-keyframes @name 
{
 code...
}

改成"@name"​@name

你应该;在之后删除

.keyframes(@name, @from, @to) {