CSS3過渡只有當添加類，而不是當除去

Question

我有以下CSS例如：

.message{ 
    background-color: red; 
    transition: background-color 5s; 
    -webkit-transition: background-color 5s; /* Safari */ 
    transition-delay: 2s; 
    -webkit-transition-delay: 2s; /* Safari */ 
} 

.unreadMessage{ 
    background-color: blue; 
} 

然後，我有.message類，並通過按壓按鈕一個DIV，我添加類.unreadMessage，並通過按另一個按鈕，我刪除它。

在此示例中，每當我更改background-color時，都會通過添加或刪除.unreadMessage來進行CSS轉換。

我想要做的事情是，如果可能的話，當我添加.unreadMessage時會立即發生顏色變化，並且只有在刪除它時才進行轉換。

我想到的第一件事就是創建一個包含CSS過渡屬性的不同類，並在添加.unreadMessage後添加它。

但是可以只使用一個類，或者使用Javascript解決方法？

Answer 1

如果你只想應用過渡時.message元素不具備unreadMessage類，然後把transition性質的.message:not(.unreadMessage)選擇：

.message{ 
    background-color: red; 
} 
.message:not(.unreadMessage) { 
    -webkit-transition: background-color 5s; /* Safari */ 
    transition: background-color 5s; 
    -webkit-transition-delay: 2s; /* Safari */ 
    transition-delay: 2s; 
} 

.unreadMessage{ 
    background-color: blue; 
} 

• 演示：http://jsfiddle.net/Hs8fa/
• Documentation for :not()

Answer 2

有兩件事情使用CSS轉換時，要記住：當一個元素的狀態被修改「using pseudo-classes like :hover or :active or dynamically set using JavaScript.」

你必須有一個起點和終點，否則將無法正常工作

1. 轉變發生。

OP的問題最大的問題不是他們的CSS，而是他們的命名結構。 CSS轉換的一個主要模式是修改元素的類（或以MDN的語言「使用Javascript動態設置」）。在OP的例子中，他們沒有修改元素的類結構，他們是更改類。當一個元素從一個類變爲另一個類時，CSS轉換不起作用，但是當一個類被添加或刪除時，它們將起作用。

最簡單的例子是從.element到.element.active。如果我們在基類.element上進行轉換，然後添加修改類.active，則應用於.element的轉換將從.element設置轉換爲.element.active.設置。

Here's a JSFiddle example of modifying a base class

其次，這是一個我忘了所有的時間，基類必須有一個起點風格。如果我沒有在基態中設置left，我無法在修改狀態下轉換left。