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;
}

然后,我有一个DIV与.message类,并通过按下按钮,我添加类.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/
• 文档 :not()