У меня есть простой модальный элемент, который я анимирую с помощью @starting-style и параметраallow-discreet, установленного при переходе для отображения. Модальное окно анимируется без проблем, но при нажатии кнопки закрытия или Esc модальное окно переходит в верхнюю часть экрана перед анимацией.
Не знаю, что я пропустил, чтобы вызвать такое поведение.
Codepen
Open Modal
DIALOG
Close
dialog {
opacity: 0;
transform: translateY(25rem);
transition: opacity 1s ease-in-out,
transform 1s ease-in-out,
display 1s ease-in-out allow-discrete,
overlay 1s ease-in-out allow-discrete;
color: white;
background-color: black;
border-radius: 2rem;
&[open] {
opacity: 1;
transform: translateY(0rem);
@starting-style {
opacity: 0;
transform: translateY(25rem);
}
}
&::backdrop {
background-color: black;
opacity: 0.5;
}
}
if (document.getElementById("open-modal")) {
const openModalButton = document.getElementById("open-modal");
const modal = document.querySelector(".modal");
openModalButton.addEventListener("click", function onOpen() {
modal.showModal();
});
};
Подробнее здесь: https://stackoverflow.com/questions/798 ... or-to-anim
