28

CSS アニメーション キーフレーム用に、この LESS mixin を設定しようとしています。

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

しかし、名前のフレーズに問題があります。これを正しく行うオプションはありますか?

4

6 に答える 6

32

LESS >= 1.7 以降では、キーフレーム キーワード (名前) に変数を使用できます。

LESS 1.7 では、ディレクティブの動作方法にいくつかの変更が加えられました。これにより、名前/キーワードに変数を使用できるようになりました@keyframes(したがって、質問の例は今すぐ動作するはずです)。

残念ながら、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, @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;
  }
}

例のようにandを使用するだけでなく、 .from(){}and .to(){}mixinsを定義する必要があることに注意してください (LESS は動的に生成されたプロパティも許可しないため) ... この mixins は、目的のプロパティと値を構築できるようになりました ... to次のような特定のプロパティを使用して、ガードまたは名前固有のミックスインを使用できます。@from@to

// 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 実装が必要です。

編集：接頭辞に関する追加の質問へ

ベンダープレフィックス付きのミックスイン

ここでは、2 つの mixin を作成しました... 1 つはベンダー プレフィックスなしで、もう 1 つは両方とも一般的な.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;

  • 上記の mixin を名前空間でラップする場合は、他の mixin 内の mixin 参照をパス全体 (名前空間を含む) に変更してください。

    例えば：

   #namespace > .keyframes () // see .less source in the demo for details
于 2013-04-22T12:23:05.577 に答える
6

私は現在ミックスインライブラリに取り組んでいます

ソースはここにあります 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);
  }
}
于 2014-02-04T22:14:34.493 に答える
1

また、Martin Turjakによる素晴らしい回答のおかげで(ありがとうございます) 、キーフレームとアニメーションの css コードをハックなしで柔軟に生成する mixin を少なくした github を配置しました。ここでgithub.com/kuus/を見つけることができます。 animate-me.less .

この mixin を使用すると、次のコードを記述して、有効なクロスブラウザー CSS を取得できます (完全な説明については、github リポジトリを参照してください)。

.animate-me(ComplexAnimation; 0.4s ease; '.complex-animation';
    '50%, 100%'; '%stransform: translateZ(-250px) rotateY(30deg)';
    70%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .5; background:   green';
    30%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: .2; background: yellow';
    80%; '%stransform: translateZ(-250px) rotateY(30deg); opacity: 1; background: red'
);
于 2013-11-12T23:14:45.860 に答える
0

前述のhttps://github.com/kuus/animate-me.lessは物事を行います!

私が書いたこれもチェックできます（よりきちんとしているようです）： https://github.com/thybzi/keyframes

于 2013-11-29T00:05:46.950 に答える