CSS3 One-Way-Übergang?

78

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

Antworten:

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
4
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
13
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