18

我有以下 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 解决方法吗？

4

3 回答 3

26

如果您只想在.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;
}
于 2013-05-20T09:24:02.517 回答
4

使用 CSS 过渡时要记住两件事：

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

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

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

这是一个修改基类的 JSFiddle 示例

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

于 2016-02-08T20:53:38.977 回答
0

此代码段包含一个divwithtransition: 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 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

于 2019-09-27T18:29:26.997 回答