将参数添加到@keyframes属性Less [英] 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); }

推荐答案

不能直接在Less中将参数传递给@keyframes.但是，我们可以将整个@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最初提供了答案，但由于我未知的原因将其删除了.)

只要您有兴趣，也可以用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规则中需要存在多个帧，则可以使用array-list和循环，如下面的代码片段所示.该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属性Less的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！