Encontré este modal que estoy usando en Codepen https://codepen.io/benfrain/pen/wvayeWq y me pregunto cómo puedo hacer que el modal aparezca y desaparezca gradualmente en lugar de aparecer y desaparecer.
Gracias de antemano.
var btn = document.getElementById("btn"); btn.addEventListener("click", e => { document.documentElement.setAttribute("data-modal-active", document.documentElement.getAttribute("data-modal-active") === "true" ? "false" : "true") }); aside { position: absolute; z-index: 100; background-color: #777; top: 50%; left: 50%; overflow: auto; max-height: 80vh; transform: translate(-50%, -50%); display: none; flex-direction: column; [data-modal-active="true"] & { display: flex; } }Lo entiendo ahora, lo siento, no noté el cambio en el valor primero. Muchas gracias por la ayuda.
CSS
aside { position: absolute; z-index: 100; background-color: #777; top: 50%; left: 50%; overflow: auto; max-height: 80vh; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transition: visibility 0.5s, opacity 0.5s linear; transition: visibility 0.5s, opacity 0.5s;