0

Estuve haciendo algunas animaciones de cargado para mi página web y me gustaría saber si se puede eliminar el elemento tras su animación, ya que probe con "display: none" y "opacity: 0", pero los botones y otros elementos que hay detrás del loader no pueden ser interactuados.

#loading {
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-items: center;
    text-align: center;
    animation: difuminado-div 4.5s ease-in-out;

    * {
        margin-left: auto;
        margin-right: auto;
    }
}

@keyframes difuminado-div {
    0% { 
        width: 100vw;
        height: 100vh;
        display: flex;
    }
    50% {
        opacity: 1;
    }
    99% {
        width: 100vw;
        height: 100vh;
        display: flex;
    }
    100% {
        width: 0vw;
        height: 0vh;
        display: none
    }
}

Espero que me podáis ayudar y gracias de antemano.

1 respuesta 1

0

Algo similar me paso, yo te diria hacer un div que contenga estos elementos, ese div lo que vas a ponerle es justamente overflow: hidden; opacity: 0; y position: absolute, luego tu acomoda el absolute con inset/top/left/etc...

4
  • Bien, lo intentaré y veré que consigo gracias.
    – Prozoon700
    Commented el 6 mar. a las 12:58
  • Probé también a eliminarlo con JavaScript, pero no consigo que se ejecute una animación de cierre (se oculta directamente). Un saludo.
    – Prozoon700
    Commented el 6 mar. a las 12:59
  • Prueba con crear una nueva clase la cual contenga la animacion de cierre, esto dale un retraso de animacion. Una vez finalizada la animacion por esta clase recien ahi eliminas los elementos, se entiende? Dejas una clase para la carga y otra clase para el cierre ahi aplicas un @keyframes que pase para el cierre de opacity: 1 a 0 y luego en el js haces lo siguiente: Gestiona el elemento loader, le agregas esta clase de cierre "exit" (classList.add('exit')) digamos que se llama y luego de un tiempo con setTimeout() para que pase un tiempo, lo remueves con removeChild(loader). A ver si te sirve
    – Alan Stone
    Commented el 6 mar. a las 13:08
  • Si te entendí. ¿Pero te importaría pasar una versión del código que explicas? La verdad que mis conocimientos no llegan a tanto.
    – Prozoon700
    Commented el 7 mar. a las 8:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.