Hoy es viernes y mi cerebro ya está en el fin de semana y estoy atascado ahora mismo.
lo que espero
Cuando hago clic en un botón, quiero que toda la ventana se cierre en un círculo desde el exterior hacia el interior, como en una película antigua. Tan pronto como termine la animación, quiero que se llame a otra función. Para simplificar, aquí hay una alerta simple ().
¡Gracias por adelantado!
Aquí está mi estado actual del código:
const button = document.querySelector('button'); button.addEventListener('click', (e) => { const closer = document.querySelector('#closer'); const body = document.querySelector('body'); body.classList.add('bg-dark') closer.classList.toggle('box-hover'); alert(); }); * { margin: 0; padding: 0; } .bg-dark { background: black; } body { xalign-items: center; height: 100vh; xjustify-content: center; background: white; } .container { width: 50%; margin: 0px auto; background: #ccc; padding: 10px; } .box { background: white; clip-path: circle(75%); height: 100%; transition: clip-path 2s; width: 100%; } .box-hover { clip-path: circle(0%); } button { padding: 10px; z-index: 9999; } <body> <div id="closer" class="box"> <div class="container"> <h1>hello world</h1> <button>shrink</button> </div> </div> </body>