Ich habe das folgende CSS-Beispiel:

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

Dann habe ich einen Tauchgang mit.message Klasse, und durch Drücken eines Buttons füge ich die Klasse hinzu.unreadMessageund indem ich einen anderen Knopf drücke, entferne ich ihn.

Mit diesem Beispiel, jedes Mal, wenn ich mich änderebackground-colordurch Hinzufügen oder Entfernen.unreadMessageführt es den CSS-Übergang durch.

Was ich tun möchte, ist, wenn möglich, eine sofortige Farbänderung zu haben, wenn ich hinzufüge.unreadMessageund haben den Übergang nur beim Entfernen.

Das erste, was mir in den Sinn kam, war, eine andere Klasse zu haben, die die CSS-Übergangseigenschaften enthält, und sie nach dem Hinzufügen hinzuzufügen.unreadMessage.

Aber ist es möglich, es mit nur einer Klasse zu tun, oder eine Javascript-Umgehung zu verwenden?