将参数添加到 @keyframes 属性中 [英] Add argument into @keyframes property Less

问题描述

我有一个属性 @keyframes，我用 autoprefixer 编译以添加所需的前缀.

I have a property @keyframes, I compiled with autoprefixer to add the needed prefixes.

我想做的是向动画名称(或任何可能的地方)添加一个参数，以将属性值更改为关键帧键.

What I would like to do, is to add an argument to the animation name (or wherever is possible) to change a value of properties into the keyframes key.

这就是我现在拥有的:

@keyframes loader {
  0% { transform: translate(0, -50%) rotate(0deg); }
  100% { tranform: translate(0, -50%) rotate(360deg); }
}

基本上我想做的事情:

@keyframes loader(@transform) {
  0% { transform: @transform rotate(0deg); }
  100% { tranform: @transform rotate(360deg); }

推荐答案

将参数传递给 @keyframes 不能直接在 Less 中完成.然而，我们可以将整个 @keyframes 规则包装在父 mixin 中，将参数传递给该 mixin 并在框架中使用它.

Passing arguments to @keyframes cannot be done directly in Less. We can however wrap the whole @keyframes rule within a parent mixin, pass the argument to that mixin and use it within the frames.

.loader(@transform){ /* wrapper mixin which accepts input parameter */
   @keyframes loader {
     0% { transform: @transform rotate(0deg); }
     100% { transform: @transform rotate(360deg); }
   }
}

.loader(translate(0, -50%)); /* mixin call */

(Curt 最初提供了一个答案，但由于我不知道的原因删除了它.)

如果您有兴趣，通用关键帧 mixin 也可以用 Less 编写，如下所示.

Just in case you are interested, generic keyframe mixins can also be written in Less like given below.

示例 1:

.generickeyframe(@name; @from; @to){ /* takes name, from frame rules, to frame rules */
  @keyframes @name{
    0% { @from();}
    100% { @to();}
  }
}
.generickeyframe(loader; {transform: translate(0,-50%) rotate(0deg)}; 
            {transform: translate(0,-50%) rotate(360deg)});

示例 2:

.keyframefromto(@name; @from; @to){
  @keyframes @name{
    0% { transform: @from;}
    100% { transform: @to;}
  }
}
.keyframefromto(loader; translate(0,-50%) rotate(0deg); translate(0,-50%) rotate(360deg));

<小时>

如果 @keyframes 规则中需要存在多个帧，我们可以使用数组列表和循环，如下面的代码片段所示.这个 mixin 将动画的名称、帧列表(它们的百分比数字)和每个帧的属性(以规则集的形式)作为参数.

---

If multiple frames are required to be present within the @keyframes rule, we could make use of array-list and loops like in the below snippet. This mixin takes the name of the animation, the list of frames (their percentage numbers) and the properties for each frame (in the form of rulesets) as parameters.

.generickeyframe(@name; @framelist; @frameprops){
  @keyframes @name{
    .loop-framelist(@index) when (@index <= length(@framelist)){
      @framepos: extract(@framelist, @index) * 1%;
      @{framepos}{
        @props: extract(@frameprops, @index);
        @props();
      }
      .loop-framelist(@index + 1);
    }
    .loop-framelist(1);
  }
}
.generickeyframe(loader; 
                0,25,50,75,100; 
                {transform: translateX(10px);},
                {transform: translateX(20px);},
                {transform: translateX(50px);},
                {transform: translateX(20px);},
                {transform: translateX(10px);}
                );

已编译的 CSS:

@keyframes loader {
  0% {transform: translateX(10px);}
  25% {transform: translateX(20px);}
  50% {transform: translateX(50px);}
  75% {transform: translateX(20px);}
  100% {transform: translateX(10px);}
}

这篇关于将参数添加到 @keyframes 属性中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！