1

LESS を使用して「まばたき効果」のような CSS アニメーションを作成したいと考えています。@stop私の目的は、DOM 要素の css クラスに応じて異なる色の点滅を得るために、毎回 2 色を渡す単一の mixin を呼び出すことです。

現在、私は次のHTMLを持っています:

  <p class='blink'>
    Loading...
  </p>

  <p class='blink alert'>
    <big>WARNING!!!! Operation failed.</big>
  </p>

そしてここに、LESS CODE:

.blink
{
  .animation-blink-mixin(@dark-green,@light-green);

  &.alert
  {
    .animation-blink-mixin(@dark-red,@light-red);
  }
}

アニメーションミックスイン:

.animation-blink-mixin (@stop1, @stop2, @time:2s)
{
  animation:animation-blink @durata infinite;

  .steps()
  {
      0% { color:@stop1; }
     50% { color:@stop2; }
    100% { color:@stop1; }
  }

  @keyframes animation-blink { .steps(); }
}

私の問題は、両方の DOM 要素が同じ「赤い色」のアニメーションを持ち、代わりに 1 つのgreen2greenと他がred2redであることです。

いつも同じ「アニメ名」に問題があることがわかりました。望ましい動作に到達するための提案はありますか?

ありがとう。

4

1 に答える 1

1

アニメーション名を明示的に設定するだけです ( codepen demo ):

.blink {
    .animation-blink(blink, #080 + 200, #080);
    &.alert {
        .animation-blink(alert, #800, #800 + 200);
    }
}

.animation-blink(@name_, @color1, @color2, @time: .5s) {

    @name: ~"animation-blink-@{name_}";
    animation: @name @time ease-in-out infinite alternate;

    @keyframes @name {
        0% {color: @color1}
        to {color: @color2}
    }
}
于 2015-03-19T15:03:10.983 に答える