我有以下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时,要立即进行颜色更改,只有在删除它时才进行转换.
解决方法
如果您只想在.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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。