Estoy tratando de desvanecerme en el cuadrado azul con el primer clic del botón. Y luego, en el segundo clic, el cuadrado azul se desvanece y el rojo se desvanece.
Como puede ver cuando lo prueba, no funciona de esa manera. No sé dónde estoy equivocado y si alguien puede mostrarme cómo solucionarlo, se lo agradecería.
var currentscene = 0; function next() { currentscene++; if (currentscene = 1) { var element = document.getElementById("blue"); element.classList.add("fade-in"); } if (currentscene = 2) { var element = document.getElementById("blue"); element.classList.add("fade-out"); var element = document.getElementById("red"); element.classList.add("fade-in"); } } .squareblue { height: 50px; width: 50px; top: 50px; background-color: blue; position: absolute; opacity: 0; animation-fill-mode: forwards; } .squarered { height: 50px; width: 50px; top: 100px; background-color: red; position: absolute; opacity: 0; animation-fill-mode: forwards; } .fade-out { animation: fadeOut ease 2s } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fade-in { animation: fadeIn ease 2s } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } <div2 id="blue" class="squareblue"></div2> <div2 id="red" class="squarered"></div2> <button class="button" onclick="next()">next</button>Algunos errores, y algunas cosas para mejorar.
Dentro de sus condicionales if , estaba asignando el valor de 1 y 2 a la variable currentscene en lugar de usar el operador de comparación == . Agregué el operador restante para poder continuar el ciclo indefinidamente.
En lugar de tomar el elemento del dom de cada ciclo, solo definí los elementos en la parte superior y continué haciendo referencia a la variable de guardar.
en lugar de usar una animación de fotogramas clave css, usé la propiedad de transition css para agregar animación al cambio de opacidad.
Si tiene alguna pregunta, por favor pregunte 🚀
let currentscene = 0; const blue = document.getElementById("blue");; const red = document.getElementById("red");; function next() { currentscene++; if (currentscene % 2 == 0) { blue.classList.remove("opaque"); red.classList.add("opaque"); } else if (currentscene % 2 == 1) { red.classList.remove("opaque"); blue.classList.add("opaque"); } } .squareblue, .squarered { height: 50px; width: 50px; position: absolute; opacity: 0; animation-fill-mode: forwards; transition: 1s; } .squareblue { top: 50px; background-color: blue; } .squarered { top: 100px; background-color: red; } .opaque { opacity: 1; } button {user-select: none} <div2 id="blue" class="squareblue"></div2> <div2 id="red" class="squarered"></div2> <button class="button" onclick="next()">next</button>