Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika.
Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do niej jest również ustawione transition oraz opacity: 0. Kliknięcie w element powoduje dodanie klasy do body, która to klasa zmienia display na block a także opacity ustawi na 1. No i mamy ładną animację opacity.
Ale co z drugą częścią? Gdy klikam ponownie na element i usuwam klasę z body. Zamiast ładnego przejścia mam "chamskie" zniknięcie warstwy bez animacji opacity.
Jest na to proste rozwiązaniem bez kombinowania w css, zmiana wysokości na 0, czy nawet z js a mianowicie na użycie animationend
Zaczniemy od html
<!-- włączenie/wyłączenie modal -->
<button type="button">MODAL</button>
<!-- najlepiej tę warstwę dodać gdzieś -->
<!-- na końcu strony przez zamknięciem body -->
<div class="modal"></div>Teraz najważniejsza cześć czyli style.
.modal {
position: fixed;
background: rgba(171, 108, 253, 0.4);
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
margin: auto;
/* najważniejsza część */
opacity: 0;
pointer-events: none;
/* nasza animacja */
transition: opacity 0.2s ease-in-out;
}
/* active-modal klasa dodawana do body
strony podczas kliknięcie w button */
.active-modal .modal {
opacity: 1;
pointer-events: auto;
}No i oczywiście kod wywołujący a także zamykający warstwę div
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
// dodaje/usuń klasę z body
document.body.classList.toggle('active-modal');
})Poniżej cały działający przykład.
See the Pen
modal with point-event by Greg (@Tomik23)
on CodePen.