CSS3 Übergang nur dann, wenn Klasse hinzugefügt wird, nicht, wenn sie entfernt

Question

Ich habe folgendes 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 sie.

Mit diesem Beispiel wird jedes Mal, wenn ich background-color ändere, durch Hinzufügen oder Entfernen von .unreadMessage der CSS-Übergang durchgeführt.

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

Das erste, was mir in den Sinn kam, war eine andere Klasse mit den CSS-Übergangseigenschaften zu haben, und fügen Sie sie nach dem Hinzufügen .unreadMessage hinzu.

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

Answer 1

Wenn Sie möchten nur einen Übergang anzuwenden, wenn das .message Element nicht die unreadMessage Klasse hat, setzen dann die transition Objekte im .message:not(.unreadMessage) Selektor:

.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

Es gibt zwei Dinge zu erinnern, wenn CSS-Übergänge mit:

1. Transitions passieren, wenn sich der Status des Elements modifiziert wird „using pseudo-classes like :hover or :active or dynamically set using JavaScript.“
2. Sie haben einen Startpunkt und einen Endpunkt haben oder sie wird nicht funktionieren.

Das größte Problem mit OP-Frage ist nicht ihre CSS, es ist ihre Benennungsstruktur. Ein Hauptmuster von CSS-Übergängen besteht darin, die Klasse eines Elements zu modifizieren (oder in der Sprache der MDN "dynamisch mit Javascript einzustellen"). Im Beispiel von OP ändern sie nicht die Klassenstruktur eines Elements, sie sind , ändern die Klassen. CSS-Übergänge funktionieren nicht, wenn ein Element von einer Klasse in eine andere wechselt, aber sie funktionieren, wenn eine Klasse hinzugefügt oder entfernt wird. Das einfachste Beispiel hierfür ist von .element zu .element.active. Wenn wir die Transition auf die Basisklasse .element setzen und dann eine modifizierende Klasse .active hinzufügen, werden die auf .element angewendeten Transitionen von .element auf .element.active. Einstellungen umgestellt.

Here's a JSFiddle example of modifying a base class

Zweitens, und das ist, den ich die ganze Zeit vergessen, muss die Basisklasse einen Start Stil. Ich kann left nicht im geänderten Zustand überführen, wenn ich left im Basiszustand nicht eingestellt habe.