CSS3 transition nur, wenn die Klasse Hinzugefügt wird, nicht, wenn Sie entfernt werden

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 ein DIV mit .message Klasse, und durch drücken einer Taste, füge ich die Klasse .unreadMessage, und durch drücken einer anderen Taste, Entferne ich es.

Mit diesem Beispiel, jedes mal, wenn ich ändern background-color durch hinzufügen oder entfernen von .unreadMessage es tut, die CSS-übergang.

Was ich tun möchte, ist, wenn möglich, eine sofortige Farbe ändern, wenn ich .unreadMessage, und haben den übergang nur dann, wenn es zu entfernen.

Die erste Sache, die kommen in meinem Kopf, war eine andere Klasse, in der die CSS-transition-Eigenschaften, und fügen Sie es nach dem hinzufügen .unreadMessage.

Aber es ist möglich, tun Sie es mit nur einer Klasse, oder mit einem Javascript-workaround?

  • Erstellen Sie bitte ein Turnschuh einfach verstehen
InformationsquelleAutor Fr0z3n | 2013-05-20
Schreibe einen Kommentar