CSS3 transition only when class is added, not when removed - css

Question

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?

Answer 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()

Answer 2

There are two things to remember when using CSS transitions:
Transitions happen when an element's state is modified "using pseudo-classes like :hover or :active or dynamically set using JavaScript."
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.

Answer 3

This code snippet contains a div with transition: none;
On click, override transition property by adding a new class add-transition
On the 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 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