Для создания анимации открытия/закрытия модального окна в CSS без использования библиотек, вы можете использовать ключевые кадры @keyframes
и свойства animation
и display
.
Вот пример кода, который поможет вам создать такую анимацию:
HTML:
<button id="openModal">Открыть модальное окно</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Содержимое модального окна...</p> </div> </div>
CSS:
/* Стили для кнопки открытия модального окна */ #openModal { display: block; margin: 20px auto; padding: 10px 20px; background-color: #f44336; color: #fff; border: none; border-radius: 4px; cursor: pointer; } /* Стили для модального окна */ .modal { display: none; /* модальное окно изначально скрыто */ position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #888; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } /* Анимация открытия модального окна */ @keyframes openModalAnimation { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } /* Анимация закрытия модального окна */ @keyframes closeModalAnimation { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } /* Анимация */ .animation { animation-duration: 0.5s; animation-timing-function: ease-in-out; } .modal.show { display: block; /* Показываем модальное окно */ animation-name: openModalAnimation; /* Используем анимацию открытия */ } .modal.hide { animation-name: closeModalAnimation; /* Используем анимацию закрытия */ } .modal.animate { animation-fill-mode: both; /* Позволяет сохранить стиль, примененный к элементу после анимации */ }
Javascript:
const openModalButton = document.getElementById("openModal"); const modal = document.getElementById("modal"); const closeButton = document.querySelector(".close"); openModalButton.addEventListener("click", function() { modal.classList.add("animate", "show"); // добавляем классы animate и show к модальному окну }); closeButton.addEventListener("click", function() { modal.classList.remove("animate", "show"); // удаляем классы animate и show у модального окна }); modal.addEventListener("animationend", function(event) { if (event.animationName === "closeModalAnimation") { modal.classList.remove("hide"); // удаляем класс hide после окончания анимации закрытия модального окна } }); modal.addEventListener("animationstart", function(event) { if (event.animationName === "openModalAnimation") { modal.classList.add("hide"); // добавляем класс hide перед началом анимации открытия модального окна } });
В этом примере мы используем CSS для стилизации модального окна и задания анимации. Модальное окно скрывается и отображается посредством изменения свойства display
в JavaScript.
На кнопку открытия модального окна навешивается событие click
, которое добавляет к модальному окну классы show
и animate
для отображения его с анимацией. На кнопку закрытия модального окна также навешивается событие click
, которое удаляет классы show
и animate
у модального окна для его закрытия.
Мы также используем обработчики событий animationend
и animationstart
, чтобы удалять класс hide
после окончания анимации закрытия и добавлять его перед началом анимации открытия соответственно.
Надеюсь, эта информация поможет вам создать анимацию открытия/закрытия модального окна на чистом CSS без использования библиотек.