My modal is not scaling in and out properly when I toggle the 'active' class. It either fully scales out or scales in without any transition.
Example:
const openPopupButtons = document.querySelectorAll('[data-popup-target]');
const closePopupButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
openPopupButtons.forEach(button, () => {
button.addEventListener('click', () => {
const popup = document.querySelector(button.dataset.popupTarget)
openPopup(popup)
})
})
closePopupButtons.forEach(button, () => {
button.addEventListener('click', () => {
const popup = button.closest('.popup')
closePopup(popup)
})
})
function openPopup(popup) {
if (popup == null) return
popup.classList.add('active')
overlay.classList.add('active')
}
function closePopup(popup) {
if (popup == null) return
popup.classList.remove('active')
overlay.classList.remove('active')
}.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.75);
transition: 1s ease-in-out;
border: 10px double #fff8fb;
border-radius: 1em;
padding: 0 1em;
background-color: #fcdce9;
width: 600px;
max-width: 80%;
z-index: 10;
}
.popup.active {
transform: translate(-50%, -50%) scale(1);
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: .25rem .5rem;
}
.popup-header .title {
font-size: 24px;
font-weight: bold;
}
.popup-header .close-popup {
cursor: pointer;
background: none;
border: none;
outline: none;
font-size: 24px;
font-weight: bold;
}
.post-it {
border: none;
border-radius: 1em;
width: 100%;
padding: 10px 15px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16;
}
.popup-footer {
padding: .5rem 0;
display: flex;
justify-content: center;
align-items: center;
}
.create-button {
border: 3px solid #fff8fb;
border-radius: 1em;
background: none;
outline: none;
font-size: 18px;
font-weight: bold;
padding: 2.5px 20px;
cursor: pointer;
}
#overlay {
position: fixed;
opacity: 0;
transition: 500ms ease-in-out;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}<body>
<button data-popup-target="#popup" class="open-popup">Open Pop-up</button>
<div class="popup active" id="popup">
<header class="popup-header">
<div class="title"> Insert Text </div>
<button data-close-button class="close-popup"> × </button>
</header>
<div class="popup-body">
<textarea name="post-it" id="post-it" cols="30" rows="10" class="post-it"></textarea>
</div>
<footer class="popup-footer">
<button class="create-button"> Create </button>
</footer>
</div>
<div class="" id="overlay"></div>
</body>I'm facing issues with animating the modal on toggle. The hover animation works fine, but transitioning on adding/removing classes doesn't work as expected. I've tried different approaches to define transitions, like specifying properties or transitioning all, but still no luck.