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

我试图设置这个LESS混合CSS动画关键帧：

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

但有一些问题，名称pharse，有没有任何选择这样做corectly？

解决方法

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

LESS 1.7中对指令如何工作做了一些修改，允许为@keyframes的名称/关键字使用变量(因此问题的例子应该工作了)。
DEMO

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

因此，关于关键帧的正常方式将使用硬编码的名称，您只需要调用特定的“for”和“to”混合，如下所示：

.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,@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(){} mixins，而不只是使用@from和@to，就像你在你的例子中一样(因为LESS也不允许动态生成的属性)。 ..这个mixins现在可以构造所需的属性和值…要使用特定的属性，您可以使用guard或名称特定的mixin，像这样：

// 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实现。

编辑：您有关前缀的其他问题

混合与供应商前缀

这里我做了两个mixins …一个没有供应商前缀和一个与他们都调用一般.keyframes mixin：

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

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

.animation-keyframes (@name,@anim-selector) {
  @bind: "} `'\n'`";
  .keyframes (@name,"-moz-");
  .keyframes (@name,"-webkit-",@bind);
  .keyframes (@name,"-o-","-ms-","",@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;
}

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

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

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

一些注意事项：

>对于你的动画实际工作，你需要设置其他动画参数，如定时功能，持续时间，方向，迭代计数(至少需要一个持续时间除了我们已经设置的名称)。

例如：

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

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

例如：

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

DEMO

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

解决方法

相关文章