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，并通过按另一个按钮，我删除它。

在这个例子中，每次我通过添加或删除.unreadMessage来改变background-color，它都会进行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()
文档

Answer 2

使用CSS转场时要记住两件事:

1. 当一个元素的状态被"使用:hover或:active之类的伪类或使用JavaScript动态设置"修改时，会发生过渡。
2. 你必须有一个起点和终点，否则它们将不起作用。

OP的问题最大的问题不是他们的CSS，而是他们的命名结构。CSS转换的一个主要模式是修改元素的类(或者用MDN的语言"使用Javascript动态设置")。在OP的例子中，他们没有修改元素的类结构，他们改变类。当一个元素从一个类转变为另一个类时，CSS过渡将不起作用，但当添加或删除一个类时，它们将起作用。

最简单的例子是从.element到.element.active。如果我们把过渡放在基类.element上，然后添加一个修改类.active，那么应用于.element的过渡将从.element设置过渡到.element.active.设置。

下面是一个修改基类

的JSFiddle示例

其次，也是我经常忘记的一点，基类必须有一个起始样式。如果我没有将left设置为基本状态，我就无法将left转换为修改状态

Answer 3

这个代码片段包含一个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