Как выполнить CSS-переход элемента модального диалогового окна при его открытии? ⇐ CSS

[Anonymous]

Я хочу применить переход к элементам диалога при их открытии, но мой атрибут перехода, похоже, не имеет никакого эффекта. Вот мой код:

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

const dialog = document.querySelector("dialog");

document.querySelector("#open-button").addEventListener("click", () => {
dialog.showModal();
});
document.querySelector("#close-button").addEventListener("click", () => {
dialog.close();
});

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

button {
display: block;
}

dialog {
position: absolute;
top: 50px;
margin: auto;
padding: 0;
width: 50%;
height: 50%;
background-color: red;
opacity: 0;
-webkit-transition: opacity 2s ease-in, background-color 2s ease-in;
-o-transition: opacity 2s ease-in, background-color 2s ease-in;
transition: opacity 2s ease-in, background-color 2s ease-in;
}

dialog[open] {
background-color: green;
opacity: 1;
}

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

Open Dialog Element


Close Dialog Element

Моя цель — медленно постепенно исчезать из поля зрения диалога по мере того, как его фон заметно меняется. от красного к зеленому.
Вместо этого немедленно применяются правила диалога[open]? В статье MDN нигде не упоминаются переходы или анимация, подразумевая, что это должно работать как любой другой элемент.
Я тестирую это в Firefox в Windows 10.

Подробнее здесь: https://stackoverflow.com/questions/767 ... n-it-opens