更少:mixin创建闪烁动画，传递@color -stops [英] LESS: mixin to create Blink animation, passing @color -stops

问题描述

我希望使用LESS创建一个类似于眨眼效果"的CSS动画.我的目的是根据DOM元素的CSS类，每次调用2种@stop颜色时都要调用一次mixin，以便获得不同的颜色闪烁.

I wish to create a CSS animation that act like "Blink effect" using LESS. My purpose is to call a single mixin passing each time 2 @stop colors in order to get diffent color blink depending by css class of DOM element.

目前，我有以下HTML:

Currently I have the following HTML:

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

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

在这里，更少的代码:

.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元素都具有相同的红色"动画，而不是一个 green2green 和另一个 red2red .

My problem is that both DOM elements have the same "red color" animation, instead being one green2green and others red2red.

我了解到问题始终存在于动画名称"中.一些建议达到预期的行为?

I understood that problem is in "animation name" that is always the same. Some suggestion to reach desired behaviour?

谢谢.

推荐答案

只需显式设置动画名称，例如(

Just set the animation name explicitly, e.g (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}
    }
}

这篇关于更少:mixin创建闪烁动画，传递@color -stops的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！