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。