CSS3只有在添加类时才转换,而不是删除

我有以下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;
}

然后,我有一个DIV与.message类,并通过按一个按钮,我添加类.unreadMessage,并按另一个按钮,我删除它.

有了这个例子,每次我改变背景颜色,通过添加或删除.unreadMessage,它进行CSS转换.

我想要做的是,如果可能的话,当我添加.unreadMessage时,要立即进行颜色更改,只有在删除它时才进行转换.

我想到的第一件事就是要有一个包含CSS转换属性的不同类,并在添加.unreadMessage之后添加它.

但是只能使用一个类,或使用Javascript解决方法？

解决方法

如果您只想在.message元素没有unreadMessage类时仅应用转换,则将过渡属性放在.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()