web-dev-qa-db-ja.com

LESSでキーフレーム名を設定する方法

このLESSミックスインをCSSアニメーションキーフレーム用に設定してみます。

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

しかし、名前のpharseにいくつかの問題があります。これを正しく行うオプションはありますか？

csslessmixinscss-animations
28
Lukas

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

LESS 1.7ではディレクティブがどのように機能するかについていくつかの変更が行われ、_@keyframes_の名前/キーワードに変数を使用できるようになりました（質問の例は今すぐ機能するはずです）。 [〜＃〜] demo [〜＃〜]

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

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

_// 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：でミックスインを呼び出すことができます

_// 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補間を使用したことに注意してください。

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

ベンダープレフィックスとのMixin

ここでは2つのミックスインを作成しました。1つはベンダープレフィックスなしで、もう1つは一般的な_.keyframes_ mixinを呼び出すものです。

_.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;
_

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

    例えば：

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

[〜＃〜] demo [〜＃〜]

31
Martin Turjak

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

ソースはここにあります 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);
  }
}
4
user950658

これはどう：

@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}
@-ms-keyframes some-animation {.mixi-frames;}
@-o-keyframes some-animation {.mixi-frames;}
@keyframes some-animation {.mixi-frames;}

.mixi-frames () {
    from {width: 254px;}
    to {width: 512px;}
}

アニメーションごとに行う必要があります。取得元： http://radiatingstar.com/css-keyframes-animations-with-less

2
JVitela

Martin Turjak 、による素晴らしい回答にも感謝します（=ありがとうございます）キーフレームとアニメーションのcssコードを生成する少ないミックスインをgithubに配置しましたハックなしで柔軟な方法で、ここで見つけることができます github.com/kuus/animate-me.less 。

このミックスインを使用すると、このコードを記述して、有効なクロスブラウザーの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'
);
1
kuus

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

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

0
thybzi

あなたはこれを行うべきだと思います

@-webkit-keyframes @name 
{
 code...
}

"@name"を@nameに変更

後は;を削除する必要があります

.keyframes(@name, @from, @to) {
0
tcgumus