4

プロパティがあり@keyframes、必要なプレフィックスを追加するために autoprefixer でコンパイルしました。

私がやりたいことは、プロパティの値をキーフレーム キーに変更するために、アニメーション名 (または可能な限り) に引数を追加することです。

これは私が今持っているものです:

@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); }
4

1 に答える 1

8

に引数を渡す@keyframesことは、Less で直接行うことはできません。ただし、ルール全体@keyframesを親 mixin 内にラップし、引数をその mixin に渡して、フレーム内で使用することができます。

.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 */

（カートは最初に回答を提供しましたが、私には不明な理由で削除されました。）

興味がある場合に備えて、一般的なキーフレーム ミックスインは、以下のように Less で記述することもできます。

サンプル 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 は、アニメーションの名前、フレームのリスト (パーセンテージ数)、および各フレームのプロパティ (ルールセットの形式) をパラメーターとして受け取ります。

.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);}
}
于 2015-10-09T09:14:13.583 に答える