Hice una caja de arena aquí para demostrar mi problema. Tengo un botón que abre un modal al hacer clic. Puede ver que el modal cambia lentamente de opacidad 0 a opacidad 1 durante 0,7 segundos. Pero cuando pulso el botón de cierre en el modal, desaparece instantáneamente en lugar de desaparecer lentamente en 0,7 segundos como cuando lo abro.
Aquí están mis archivos:
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="modal-overlay"></div> <div class="modal"> This is Modal <button class="close-button"> Close Modal </button> </div> <button class="open-button"> Open Modal </button> <script src="./index.js"></script> </body> </html>índice.css
.modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #444; z-index: 1; transition: visibility 0s, opacity 0.5s; opacity: 0; visibility: hidden; } .modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; margin: auto; background: #fff; width: 350px; padding: 20px; height: 30vh; width: 40vw; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.7s; }índice.js
const openBtn = document.querySelector(".open-button"); const closeBtn = document.querySelector(".close-button"); const modal = document.querySelector(".modal"); const overlay = document.querySelector(".modal-overlay"); openBtn.addEventListener("click", () => { modal.style.visibility = "visible"; modal.style.opacity = 1; overlay.style.visibility = "visible"; overlay.style.opacity = 0.6; }); closeBtn.addEventListener("click", () => { modal.style.visibility = "hidden"; modal.style.opacity = 0; overlay.style.visibility = "hidden"; overlay.style.opacity = 0; });Gracias por la ayuda
nvm, funciona ahora... solo pon el temporizador en visibilidad... Lo puse en 0 porque leí que no puedes hacer la transición de visibilidad, pero supongo que puedes...