Estoy tratando de agregar efectos en modal.
quiero hacer asi:
modal--show class, la visibility se establece en visible y la opacity continúa creciendo de 0% a 100%.modal--show , la opacity continúa disminuyendo del 100 % al 0 % y, después de eso, la visibility se establece en hidden . Mostrar animación modal funciona bien, pero ocultar animación modal no. Cuando se reproduce una animación oculta, la visibility se hidden inmediatamente cuando comienza la animación.
¿Cómo configurar la visibility: hidden después de la opacity: 0% con CSS o JS puro?
JSFiddle : https://jsfiddle.net/p1gtranh/1/
document.querySelector('.open').addEventListener('click', () => { document.querySelector('.modal').classList.add('modal--show'); }); document.querySelector('.close').addEventListener('click', () => { document.querySelector('.modal').classList.remove('modal--show'); }); .modal { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; opacity: 0%; } .modal--show { animation: show 0.5s both; visibility: visible; } @keyframes show { 0% { visibility: hidden; opacity: 0%; } 1% { visibility: visible; } 100% { opacity: 100%; } } <button class="open">open</button> <div class="modal"> <button class="close">close</button> </div>Probablemente descartaría toda la animación y simplemente haría una transition simple en su lugar.
En este caso, transition se especifica de forma abreviada. Las propiedades asociadas son:
transition-timing-function: ease-in-out : cómo se debe reproducir la transición, este valor reproducirá una transición de atenuación gradual al abrir y cerrar el modal.
transition-property: all : qué propiedad está asociada con la transición. Dado que estamos transicionando las propiedades de opacity y visibility , usar all seleccionará ambas.
transition-duration: 0.5s - cuánto debe durar la transición.
Más sobre la transition -taquigrafía aquí
document.querySelector('.open').addEventListener('click', () => { document.querySelector('.modal').classList.add('modal--show'); }); document.querySelector('.close').addEventListener('click', () => { document.querySelector('.modal').classList.remove('modal--show'); }); .modal { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; opacity: 0%; transition: all 0.5s ease-in-out; } .modal--show { visibility: visible; opacity: 100%; } <button class="open">open</button> <div class="modal"> <button class="close">close</button> </div>