Mam następujący przykład 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;
}

Potem mam DIV.message klasy i naciskając przycisk, dodaję klasę.unreadMessagei naciskając inny przycisk, usuwam go.

W tym przykładzie za każdym razem się zmieniambackground-color, dodając lub usuwając.unreadMessage, robi przejście CSS.

To, co chcę zrobić, to, jeśli to możliwe, natychmiastowa zmiana koloru, kiedy dodam.unreadMessage, i przejście tylko podczas usuwania.

Pierwszą rzeczą, która przychodzi mi do głowy, było posiadanie innej klasy zawierającej właściwości przejścia CSS i dodawanie jej po dodaniu.unreadMessage.

Ale można to zrobić tylko za pomocą jednej klasy lub za pomocą obejścia JavaScript?