4

Tengo el siguiente problema y la siguiente duda. Tengo dos condicionales, en donde se agregan animaciones, "fadeOutRigth", "fadeInRight", "ninguna", "fadeInLeft". Lo que quiero realizar es que imag, salga con un fadeOutRight, luego entre imag2 con un fadeInRight, próximamente salga imag2 con un fadeOutLeft y por último entre imag con un fadeInLeft. Digamos que lo único que no pude lograr es que imag2 salga con un fadeOutLeft, de todas formas no logro comprender por que cuando le agrego la clase "animacionDos" a img2, se termina realizando la animación en img, eso me desorienta bastante. Bueno en conclusión me gustaría que sean 4 animaciones como expliqué anteriormente(lo dejo en negrita). Se ve raro al ejecutar porque no está preparado el codigo para tan poca pantalla pero se puede clickear igual en la imagen.

var imagen = document.getElementById("imag");
var imagDos = document.getElementById("imag2");
let contadorClick = 0;

function cambioId() {
  imag.id = "imag2";   
  document.getElementById("uno").id = "unoDespues";
  document.getElementById("padreOculto").id = "padreVisible";
};
function cambioIdDos() {
  imag2.id = "imag";  

};

const getDatos = () => {
  return new Promise((resolve) => {
  setTimeout(() => {
    resolve(cambioId());
  }, 2000);
});
}
const getDatosDos = () => {
  return new Promise((resolve) => {
  setTimeout(() => {
    resolve(cambioIdDos());
  }, 2000);
});
}

imagen.addEventListener("click", function cambiarImag() {
    contadorClick++;
    console.log(contadorClick);
    if(contadorClick>=4){
        contadorClick = 0;
    }
    if(contadorClick%2 != 0) {
        document.getElementById("imag").classList.add("animacion"); /* fadeOutRight */
        document.getElementById("imag").classList.remove("animacionDos"); /* fadeInLeft */
        getDatos();
    }

    else {
        document.getElementById("imag2").classList.add("animacionDos"); /* fadeInLeft */
        document.getElementById("imag2").classList.remove("animacion"); /* fadeOutRight */
        document.getElementById("unoDespues").id = "uno";
        document.getElementById("padreVisible").id = "padreOculto";
        getDatosDos();
    }
  })
    .contenedorsec {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
  }
  #uno {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "contit imag imag"
    "contit imag imag";
    background-color:rgb(255, 255, 93);
}
#unoDespues {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.5fr 2.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "contit imag imag"
    "contit padreVisible padreVisible";
    background-color:rgb(255, 255, 93);
}

.contit { grid-area:contit; }
#padreVisible { grid-area:padreVisible; }
#imag { grid-area:imag; }
.contit {
    width: 3em;
    height: 100vh;
    margin-left: 30%;
    background-color: rgb(0, 0, 0);
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid gray;
}
.contit h1 {
    color: whitesmoke;
}
#padreOculto {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
}
#padreVisible {
    opacity: 1;
    margin-left: 1.5em;
    width: 13em;
    height: 50vh;
    background-color: wheat;
    animation:fadeIn;
    animation-duration: 2s;
}
#imag {
    width: 12em;
    height: 50vh;
    margin-top: 10em;
    border-radius: 60%;
    border: 2px solid rgb(255, 255, 255);
 }
 #imag2 {
    width: 5em;
    margin-left: 50%;
    border: 1px solid rgb(255, 255, 255);
    height: 5em;
    margin-top: 10em;
    border-radius: 0;
    animation:fadeInRight;
    animation-duration: 4s;
 }
 #texto {
    border-right: 2px solid black;
    margin: 0;
    display: inline;
}
 /* ************************* */
 .animacion {
    animation:fadeOutRight;
    animation-duration: 2s;
 }
 .animacionDos {
    animation:fadeInLeft;
    animation-duration: 2s;
 }
 .animacionSalir {
    animation:fadeOutLeft;
    animation-duration: 2s;
 }
<head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            <title>Document</title>
            <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" 
            rel="stylesheet">
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap" 
            rel="stylesheet">
            <link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"                         
            rel="stylesheet"
               integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"             
            crossorigin="anonymous">
               <link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" 
            rel="stylesheet">
           <link rel="stylesheet" 
           href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
        </head>
<body>   
               <div class="contenedorsec" id="uno">
                <!-- SUBTITULO -->
                <div class="contit">
                   <h1 id="tituloUno"><br>¿<br>Q<br>U<br>&nbspI<br>E<br>N<br><br> S<br>O<br>Y<br>?</h1>
                </div>
                <div id="padreOculto">
                   <p id="texto"></p>
                 </div>
                <img src="https://i0.wp.com/imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png?ssl=1" alt="" id="imag">
               </div>
</body>
</html>

4
  • 1
    ¿Intentaste cambiar el orden de aplicación de las animaciones? Es decir, primero hacer el .remove y luego hacer el .add. Actualmente lo hacés a la inversa.
    – padaleiana
    Commented el 6 mar. 2022 a las 22:51
  • @padaleiana sisi. Es más al principio lo tenía al revéz, lo cambié para probar. Igual estoy casi seguro que se ejecuta todo el código en el condicional primero y después se pasa la orden, es decir que el orden no modifica nada (creo por lo que sé y tengo entendido, me puedo equivocar) Commented el 6 mar. 2022 a las 22:59
  • Solo dejo un voto a favor para mientras tanto (lleva tiempo analizar). Por cierto, para que se vea la imagen, borrá el Enter de la url de la imagen :) (específicamente entre "wp-" y "content").
    – padaleiana
    Commented el 7 mar. 2022 a las 0:45
  • @padaleiana Gracias, ahí lo modifiqué! Commented el 7 mar. 2022 a las 1:17

1 respuesta 1

2

Las animaciones no se pueden asignar una tras otra, aunque hay opciones (en teoría), pero esto no funciona:

document.getElementById("imag").classList.add("animacion");
document.getElementById("imag").classList.remove("animacionDos");

Debes esperar a que termine la animación para poder ejecutar la que sigue y puedes hacerlo escuchando eventos de animación:

let divRojo = document.querySelector('#rojo');

document.querySelector('#animar').addEventListener('click', e => {
    // Asignar primera animación
    divRojo.classList.add('derecha');
});

// Ejecutar cuando finalice la animación
divRojo.addEventListener('animationend', e => {
    // ¿Tiene la primera animación?
    if(divRojo.classList.contains('derecha')) {
        // Eliminar primera animación
        divRojo.classList.remove('derecha');
        // Asignar la siguiente
        divRojo.classList.add('izquierda');
    } else {
        // Si fue la segunda, limpiar para que pueda funcionar otra vez
        divRojo.classList.remove('izquierda');
    }
});
#rojo {
    position: relative;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
}
.derecha {
    animation-name: moverDer;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.izquierda {
    animation-name: moverIzq;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes moverDer {
    0% { left: 0; }
    100% { left: 200px; }
}
@keyframes moverIzq {
    0% { left: 200px; }
    100% { left: 0; }
}
<div id="rojo"></div>
<button id="animar">Animar</button>

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.