CSS3转换仅当类添加时，而不是删除时 [英] CSS3 transition only when class is added, not when removed

问题描述

我有以下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 类，通过按一个Button，我添加类 .unreadMessage ，然后按另一个Button，我删除它。

Then, i have a DIV with .message class, and by pressing a Button, i add the class .unreadMessage, and by pressing another Button, i remove it.

在这个例子中，每当我改变 background-color 时，通过添加或删除 .unreadMessage ，它做CSS转换。

With this example, every time i change background-color, by adding or removing .unreadMessage, it does the CSS transition.

我想做的是，如果可能的话，当我添加 .unreadMessage ，只有在删除它时才有转换。

What i want to do, is, if possible, to have an instant color change when i add .unreadMessage, and have the transition only when removing it.

我想到的第一件事是有一个不同的类包含CSS转换属性，并在添加 .unreadMessage 后添加。

The first thing that come in my mind, was to have a different class containing the CSS transition properties, and add it after adding .unreadMessage.

仅使用一个类，或使用Javascript解决方法？

推荐答案

当 .message 元素没有 unreadMessage 类，则将 transition .message：not（.unreadMessage）选择器：

If you want to only apply a transition when the .message element does not have the unreadMessage class, then put the transition properties in the .message:not(.unreadMessage) selector:

.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（） 的文档



这篇关于CSS3转换仅当类添加时，而不是删除时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！