CSS3 transition only when class is added, not when removed

问题

I have the following CSS example:

.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;
}

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.

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

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.

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.

But it is possible to do it with only one class, or using a Javascript workaround?

回答1:

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;
}

• Demo: http://jsfiddle.net/Hs8fa/
• Documentation for :not()

回答2:

There are two things to remember when using CSS transitions:

1. Transitions happen when an element's state is modified "using pseudo-classes like :hover or :active or dynamically set using JavaScript."
2. You have to have a starting point and an ending point or they won't work.

The biggest issue with OP's question isn't their CSS, it's their naming structure. A major pattern of CSS transitions is to modify an element's class (or in the MDN's language "dynamically set using Javascript"). In OP's example they're not modifying an element's class structure, they're changing classes. CSS transitions won't work when an element changes from one class to another, but they will work when a class is added or taken away.

The easiest example of this is going from .element to .element.active. If we put the transition on the base class, .element, and then add a modifying class, .active, the transitions applied to .element will transition from .element settings to .element.active. settings.

Here's a JSFiddle example of modifying a base class

Secondly, and this is one I forget all the time, the base class must have a starting style. I can't transition left in the modified state if I don't have left set in the base state.

回答3:

Run the code snippet first then read below

Code snippet follows have a div with transition: none;

On click, overriden transition property with adding a new class add-transition

On second click, the same class is removed & no 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

来源：https://stackoverflow.com/questions/16646233/css3-transition-only-when-class-is-added-not-when-removed