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

当元素的状态被修改时发生转换＆＃34; using pseudo-classes like :hover or :active or dynamically set using JavaScript.＆＃34;
你必须有一个起点和一个终点，否则他们就不会工作。

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

最简单的示例是.element到.element.active。如果我们将转换放在基类.element上，然后添加修改类.active，则应用于.element的转换将从.element设置转换为{{ 1}}设置。

Here's a JSFiddle example of modifying a base class

其次，这是我一直忘记的，基类必须有一个起始样式。如果我没有在基本状态设置.element.active.，我就无法在修改状态下转换left。

Answer 3

先运行代码片段，然后阅读以下内容

后面的代码段中有一个div和transition: none;

点击时，通过添加新的类transition覆盖add-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 diffrence.
   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">
  Click here !!! <br/>
  By default, No transition. <br/>
  on click, bg color transition added. <br/>
  on second click, back to default, no transtion.
</div>

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

CSS3转换仅在添加类时，而不是在删除时

3 个答案:

先运行代码片段，然后阅读以下内容