CSS3 One-Way-Übergang?

Mithilfe von CSS3-Übergängen können Sie für jede Eigenschaft einen Glättungs- und Glättungseffekt erzielen.

Kann ich es so einrichten, dass es nur einen Glättungseffekt hat? Ich möchte, dass die Lösung nur in CSS vorliegt und JavaScript nach Möglichkeit vermieden wird.

Logikfluss:

Benutzer klickt auf Element
Der Übergang dauert 0,5 Sekunden, um die Hintergrundfarbe von Weiß nach Schwarz zu ändern
Benutzer lässt die linke Maustaste los
Der Übergang dauert 0,5 Sekunden, um die Hintergrundfarbe von Schwarz nach Weiß zu ändern

Was ich möchte:

Benutzer klickt auf Element
Der Übergang dauert 0s, um sich zu ändern
Benutzer lässt die Maustaste los
Der Übergang dauert 0,5 Sekunden, um sich zu ändern ...

Es gibt keine Übergangszeit, aber eine Übergangszeit.

html css

— Abhishek
quelle

128

Ich habe Folgendes im CSS3 Tryit Editor versucht und es hat in Chrome (12.0.742.60 Beta-M) funktioniert.

/* transition out, on mouseup, to white, 0.5s */
input
{
  background:white;
  -webkit-transition:background 0.5s;
  -moz-transition:background 0.5s;
  -ms-transition:background 0.5s;
  -o-transition:background 0.5s;
  transition:background 0.5s;
}

/* transition in, on click, to black, 0s */
input:active
{
  background:black;
  -webkit-transition:background 0s;
  -moz-transition:background 0s;
  -ms-transition:background 0s;
  -o-transition:background 0s;
  transition:background 0s;
}

<input type="button" value="click me to see the transition effect!">

Erweitern Sie das Snippet

— Matty K.
quelle

doh! Ich kann nicht glauben, dass mir das nicht eingefallen ist ... Natürlich! Der Basisübergang ist auf 0s gesetzt, und der aktive Zustandsübergang überschreibt die Basiswerte, und das ist auf 0,5s gesetzt ... Seufz ... Ich brauche eine Tasse Kaffee ...

— Abhishek

In meinem Fall wollte ich, dass ein Übergang verzögert / beim Hover-In auftritt, nicht beim Hover-Out. Die Lösung war einfacher, als ich das Obige gelesen habe: Setzen Sie einfach einen Übergang auf die: hover-Regel, ohne dass Sie irgendwo anders etwas abbrechen müssen. Vielen Dank, dass Sie in die richtige Richtung zeigen, mit einem klaren Beispiel.

— Schmuli

Vielen Dank für Ihre Antwort, ich habe sie getestet, aber sie hat bei mir (in Chrome) funktioniert, als der Übergang umgekehrt eingestellt wurde. Ich weiß nicht, ob sich die

— technischen Daten

Vielen Dank! Ich denke, ich dachte zu kompliziert. Ich wollte opacity, dass ein Element "ausgeblendet" wird, sobald eine CSS-Klasse bvorhanden ist, aber die Änderungen abrupt angezeigt werden, sobald diese CSS-Klasse weg ist (ohne Übergang). Also habe ich definiert .a { transition: ... 0s...; } .b { opacity: 0.5; } .b.a { transition: ... 2s ...; }. Wenn nun ein Element, an das immer eine CSS-Klasse aangehängt ist, ebenfalls eine Klasse erhält b, wird die Deckkraft auf 0,5 ausgeblendet, während, wenn sie bplötzlich nicht mehr vorhanden ist, kein Übergang zurück erfolgt.

— Igor