Der neue CSS-Übergang „zurück“ zum ursprünglichen Wert funktioniert nicht ⇐ CSS

[Anonymous]

Setup
Stellen Sie sich ein div-Element vor, wir können basierend auf dem [offenen]-Status eines umschaltbaren Details-Elements verschiedene Farben malen. Wir beginnen mit (1) dem Details-Controller und (2) einem nächsten Geschwister, dem paintable .zone-Element:

Code: Select all

Painting color: 

Geben Sie dem zunächst einen grundlegenden weißen Hintergrundübergang, der nicht ganz spezifisch auf seine Klasse zutrifft:

Code: Select all

.zone {
background: white;
transition: 10s;  /* if nothing else applies, gradually turn white again */
}

Fügen Sie nun zwei verschiedene Selektoren mit spezifischeren Regeln hinzu, um diese Hintergrundeigenschaft schrittweise per Übergang zu ändern:

Code: Select all

/* when details is open, clicks rapidly turn sibling .zone blue */
[open] + .zone:active {
background: blue;
transition: 3s;
}

/* when details is not open, clicks rapidly turn sibling .zone red */
:not([open]) + .zone:active {
background: red;
transition: 3s;
}

/* for ease of use, let's label the color on the details switch */
summary:after {
content: "red brush";
}
[open] summary:after {
content: "blue brush";
}

So weit so gut. Wir können sehen, wie sich das Quadrat beim Klicken schnell rot oder blau ändert und dann allmählich wieder weiß wird, wenn nicht geklickt wird. Hier ist ein einfaches Beispiel für die Ausführung:

Code: Select all

summary:after {
content: "red brush";
}
[open] summary:after {
content: "blue brush";
}

.zone {
transition-duration: 10s;
height: 100px;
width: 100px;
background-color: white;
border: thin solid black;
}

:not([open]) + .zone:active {
transition-duration: 2s;
background-color: red;
}

[open] + .zone:active {
transition-duration: 2s;
background-color: blue;
}

Code: Select all

Active color: 

Schließlich kommt hier das Problem: Wenn wir stattdessen den Schalter so einstellen, dass das Quadrat schnell rot oder weiß wird (dasselbe wie die ursprüngliche Grundlinienfarbe), wird der schnelle Übergang nicht wirksam. Stattdessen wird das Quadrat langsam weiß, als ob wir nicht darauf geklickt hätten, und die beschleunigte :active-Regel bewirkt nichts.

Code: Select all

summary:after {
content: "red brush";
}
[open] summary:after {
content: "WHITE brush";
}

.zone {
transition-duration: 10s;
height: 100px;
width: 100px;
background-color: white;
border: thin solid black;
}

:not([open]) + .zone:active {
transition-duration: 2s;
background-color: red;
}

[open] + .zone:active {
transition-duration: 2s;
background-color: white;
}

Code: Select all

Active color: 

Das ist für mich etwas erstaunlich; Es scheint fast ein Fehler zu sein, aber es scheint in allen Browsern konsistent zu sein. Ich verstehe intuitiv, dass sich dieses Verhalten (d. h. das Versäumnis, einen neuen Übergang zugunsten eines fortlaufenden Übergangs zum gleichen Eigenschaftswert zu animieren) manifestiert, wenn ein Element aufgefordert wird, eine seiner Eigenschaften in einen Eigenschaftswert umzuwandeln, den es „bereits“ hat.
Ich verstehe auch, dass ich dieses Problem mit „fast“ übereinstimmenden Eigenschaften umgehen kann (z. B. den Übergang zu cremefarbenem #fffffe anstelle von Weiß).
Das bin ich Ich suche entweder:

• eine Lösung, die es mir ermöglicht, einen laufenden Übergang durch einen zeitlich unterschiedlichen Übergang zum gleichen Zielwert zu ersetzen, oder
• zumindest eine weit anwendbare Theorie von CSS-Übergängen, die es mir ermöglicht, zu verallgemeinern, warum dieses Verhalten auftritt.

Ich bin auf dieses Problem eingegangen, um mein Problem zu entdecken Das Verständnis der CSS-Übergangsinterna ist eine gähnende Lücke. Wie genau behält ein Element seine Übergangszustände bei? Welche Regeln entscheiden darüber, wann sie aktualisiert werden oder nicht? Ich habe keine Ahnung. Die Antworten würden vorzugsweise Verweise auf CSS-Spezifikationen enthalten, aber ich würde mich auch über praktische Demonstrationen freuen, die das Problem klarer aufzeigen. (Und am glücklichsten ist es, wenn es eine Möglichkeit gibt, dieses Problem vollständig zu beseitigen.)