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 过渡时要记住两点：

1. 当元素的状态被修改“using pseudo-classes like :hover or :active or dynamically set using JavaScript.”时会发生转换
2. 您必须有一个起点和一个终点，否则它们将不起作用。

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。

Answer 3

此代码 sn-p 包含 div 和 transition: none;

点击时，通过添加新类 add-transition 来覆盖 transition 属性

第二次点击时，相同的类被删除并且没有过渡。

var elm = document.querySelector('.no-transition'); 
        
elm.onclick = () => (
    elm.classList.toggle('add-transition') 
); 

.no-transition {
    background-color: aliceblue;
    transition: none;
}

.add-transition {
    background-color: deepskyblue;
    transition: background-color 3s;
}

/* Note: As like other any other CSS property
   Specificity or CSS Order can make the difference.
   Styles below are for code the snippet to look better. */

.wrapper {
    padding: 20px;
    margin: 20px;
    text-align: center;
    cursor: pointer;
    border: 1px solid lightgray;
}

<div class="wrapper no-transition">
  Run code snippet & click here !!!<hr/>
  on load, No transition. <br/>
  on click, transition added(bg color). <br/>
  on second click, no transtion.
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity