0

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>

1
  • Una forma que se me ocurrió es usar un promise.all pero no entiendo del todo este concepto, espero que alguien me pueda ayudar Commented el 27 abr. 2022 a las 2:01

1 respuesta 1

0

creo que por allí esta bien.

simplifique un poco el código saque las promesas que no están haciendo nada, agregue una tercera animación que seria cuando la imagen regresa a su ubicación original. y evita usar cambios de id, que el DOM se marea cuando haces eso, lo mejor es dejar todo en clases e ir llamándolas cuando las necesites.

var imagen = document.getElementById("imag");
var padre=document.getElementById("padre");
var uno=document.getElementById("uno");
let contadorClick = 0;

function cambio() {
            imagen.removeAttribute("class");
      imagen.classList.add("imag2"); /* fadeInLeft */

        uno.classList.remove("uno");
      uno.classList.add("unoDespues");
      
        padre.removeAttribute("class");
      padre.classList.add("pVisible");
};
function cambioDos() {
            imagen.removeAttribute("class");
      imagen.classList.add("imag"); /* fadeInLeft */
      imagen.classList.add("animacionTres");

};

imagen.addEventListener("click", function cambiarImag() {
    contadorClick++;
    console.log(contadorClick);
    if(contadorClick>=4){
        contadorClick = 0;
        return;
    }
    if(contadorClick%2 != 0) {
        imagen.classList.add("animacion"); /* fadeOutRight */
        imagen.classList.remove("animacionDos"); /* fadeInLeft */
        setTimeout(() => {  cambio();  }, 2000);
        
    }else{
            //imagen.classList.remove("animacion"); /* fadeOutRight */
        imagen.classList.add("animacion"); /* fadeInLeft */
        
                    uno.classList.remove("unoDespues");
                uno.classList.add("uno");
    
                    padre.classList.remove("pVisible");
            padre.classList.add("pOculto");
       setTimeout(() => { cambioDos();  }, 2000);
    }
 });
.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; }
.pVisible { 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;
}
.pOculto {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
}
.pVisible {
    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;
 }
 .animacionTres {
    animation:fadeInRight;
    animation-duration: 4s;
 }
 .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 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 uno" 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="padre">
                   <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" class="imag" alt="" id="imag">
               </div>
</body>
</html>

se que no esta bien al 100% pero al menos es funcional

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.