更少: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屋!