У меня есть следующий пример 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 класс, и, нажав кнопку, я добавляю класс.unreadMessageи, нажав другую кнопку, я удаляю ее.

В этом примере каждый раз, когда я меняюbackground-color, добавляя или удаляя.unreadMessage, это делает переход CSS.

Что я хочу сделать, так это, если возможно, иметь мгновенное изменение цвета при добавлении.unreadMessageи иметь переход только при его удалении.

Первое, что мне пришло в голову, это иметь другой класс, содержащий свойства перехода CSS, и добавить его после добавления.unreadMessage.

Но возможно ли сделать это только с одним классом или с помощью обходного пути Javascript?