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