使用幾個css類進行轉換

是否可以使用幾個css類進行轉換？使用幾個css類進行轉換

如果我有這樣的CSS：

.fade { 
    opacity: 0; 
    transition: opacity .5s linear; 
} 
.left { 
    left: 10px; 
    transition: left .3s ease; 
}

那麼我就不能1個html元素上使用的2類，一個過渡性質將覆蓋其他。 我知道我可以創建一個類.fade-left可以同時執行（請參閱this question），但我希望保持這種模塊化。

有沒有辦法添加兩個轉換？

來源

2016-04-26 Elodie Prevot

擁有多個設置相同屬性的類與使單個類設置兩次相同屬性沒有區別。 – cimmanon

@cimmanon不會重寫轉換嗎？ –

@PraveenKumar這就是我想要做的。如果我寫'.foo {color：red} .bar {color：green}'，它與編寫'.foo.bar {color：red;顏色：綠色}'。 – cimmanon

你需要用這種方式使用多個轉變：

transition: opacity .5s linear, left .3s ease;

壓縮擴大方式：

-webkit-transition: opacity .5s linear, left .3s ease; 
    -moz-transition: opacity .5s linear, left .3s ease; 
    -ms-transition: opacity .5s linear, left .3s ease; 
     transition: opacity .5s linear, left .3s ease;

由於其它類不改變left屬性，你不需要擔心。以簡單的方式，您可以使用all。

來源

2016-04-26 12:36:07

謝謝你的幫助，但這是我想寫的東西，如果我想創建一個.fade-left類，我不這樣做。當我想要一個按鈕是大紅色的時候，我可以添加2個.big和.red類，不需要創建一個.big-red類，因爲它們改變了2個獨立的CSS屬性。左邊的過渡和不透明的過渡也是兩個獨立的行爲，我認爲有一種方法可以保留這些獨立的類。 –

@ElodiePrevot我不認爲這是可能的。 –

使用幾個css類進行轉換

回答

相關問題