元素的動畫關鍵幀的繼承

Question

我有一個元素.shake，當它是:hover動畫開始。我需要繼承撼動元素屬性及其動畫:hover的效果。

我有

.inherit-shake { 
    .shake; 
} 

它不工作，因爲.inherit-shake只是繼承了原.shake屬性，但其:hover動畫。

有沒有辦法做到這一點使用較少？

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功能與all關鍵字像下面的代碼片段：

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

extend函數中的all關鍵字將確保.inherit-shake:hover獲得與適用於.shake:hover相同的屬性。編譯後的CSS輸出將是象下面這樣：使用extend功能的

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

增加的優點是，它會（如上所示一樣在輸出）自動組選擇器。