Новый переход CSS «назад» к исходному значению не работает ⇐ CSS

[Anonymous]

Настройка
Рассмотрим элемент div, мы можем рисовать разными цветами в зависимости от состояния [open] переключаемого элемента деталей. Мы начинаем с (1) контроллера деталей и (2) следующего брата, который представляет собой окрашиваемый элемент .zone:

Код: Выделить всё

Painting color: 

Сначала задайте базовый переход на белый фон, который не очень конкретно применим к его классу:

Код: Выделить всё

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

Теперь добавьте два разных селектора с более конкретными правилами, чтобы постепенно менять свойство фона посредством перехода:

Код: Выделить всё

/* 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";
}

Пока все хорошо. Мы видим, как квадрат быстро меняет цвет на красный или синий при щелчке, а затем постепенно возвращается к белому цвету, если не нажимать на него. Вот простой пример:

Код: Выделить всё

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;
}

Код: Выделить всё

Active color: 

Наконец, здесь возникает проблема: если вместо этого мы заставим квадрат быстро становиться красным или белым (так же, как исходный базовый цвет), быстрый переход не вступит в силу. Вместо этого квадрат медленно становится белым, как если бы мы не нажимали на него, а ускоренное правило :active ничего не делает.

Код: Выделить всё

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;
}

Код: Выделить всё

Active color: 

Меня это немного удивляет; это почти похоже на ошибку, но выглядит одинаково во всех браузерах. Я интуитивно понимаю, что такое поведение (т. е. неспособность анимировать новый переход в пользу продолжающегося перехода к тому же значению свойства) проявляется всякий раз, когда элементу предлагается преобразовать одно из его свойств в значение свойства, которое у него «уже» есть.
Я также понимаю, что могу обойти эту проблему с помощью «почти» совпадающих свойств (например, перехода к не совсем белому #fffffe вместо белого).
Я ищу либо:

• решение, которое позволит мне заменить текущий переход переходом с другим временем перехода к тому же целевому значению, либо
• хотя бы широко применимую теорию переходов CSS, которая позволит мне обобщить, почему происходит такое поведение.

Я занялся этой проблемой, чтобы обнаружить свой понимание внутреннего устройства перехода CSS — это зияющая пустота. Как именно элемент сохраняет свои переходные состояния? Какие правила решают, когда их обновлять или нет? Не имею представления. Предпочтительно, чтобы ответы включали ссылки на спецификации CSS, но я также был бы рад практическим демонстрациям, которые более четко определяют проблему. (И больше всего радует возможность полностью устранить эту проблему.)

Подробнее здесь: https://stackoverflow.com/questions/798 ... oesnt-work