元素动画关键帧的继承

Question

我有一个元素 .shake，当它是 :hover 时，动画开始。我需要继承shake元素属性和它的动画:hover效果

我有

.inherit-shake {
   .shake;
}

它不起作用，因为 .inherit-shake 只继承了主要的 .shake 属性，但继承了它的 :hover 动画。

有没有办法使用 Less 来做到这一点？

Answer 1

如果 .shake 和 .shake:hover 的规则是按照下面的代码片段编写的，那么您当前的代码应该按原样工作。

.inherit-shake {.shake;}
.shake{
    a:a;
    &:hover{b:b;}
}

但是，我认为它们的写法如下，这就是 :hover 规则未应用于 .inherit-shape 选择器的原因。

.inherit-shake {.shake;}
.shake{a:a;}
.shake:hover{b:b;}

最好的解决方案是使用第一个片段中提到的模型。但是，如果您出于某种原因无法更改源混合，那么最好使用 extend function with all 关键字，如下面的代码片段所示：

.inherit-shake {&:extend(.shake all);}
.shake{a:a;}
.shake:hover{b:b;}

extend 函数中的 all 关键字将确保 .inherit-shake:hover 获得与 .shake:hover 相同的属性。编译后的 CSS 输出如下所示：

.shake, .inherit-shake {a: a;}
.shake:hover, .inherit-shake:hover {b: b;}

使用 extend 函数的另一个好处是它会自动对选择器进行分组（如上面所示的输出）。

Inheritance of animation keyframes of element