Как я могу перевести модальный диалог, когда он откроется? ⇐ CSS

[Anonymous]

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

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

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

document.querySelector("#open-button").addEventListener("click", () => {
dialog.showModal();
});
document.querySelector("#close-button").addEventListener("click", () => {
dialog.close();
});< /code>
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;
}< /code>
Open Dialog Element


Close Dialog Element

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

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