Una forma de emular ese comportamiento podría ser usando la función setInterval()
, acceder a las propiedades del elemento, y cada determinado tiempo realizar una modificación.
En este caso he bajado la opacidad comenzando desde 0.99 hasta 0.50 y viceversa, además de cambiar el color cuando se cumplen ciertas condiciones.
Perdón si el código no ha quedado tan elegante.
Este ejemplo funciona al hacer click sobre el div.
var div = document.getElementById("principal");
var valor = 100;
var intervalo;
var decremento = true;
//establecemos valores al div
div.style.width = "120px";
div.style.height = "120px";
div.style.background = "blue";
function detener(){
clearInterval(intervalo);
//restablecemos valores
valor = 100;
decremento = true;
}
div.addEventListener("click", function(){
intervalo = setInterval(function(){
if (decremento){
valor--;
}
else {
valor++;
}
//al dividir por 100 obtenemos los decimales que toma la funcion opacity
div.style.opacity = valor / 100;
if (valor == 50) {
if (div.style.background == "blue"){
div.style.background = "red";
}
else{
div.style.background = "blue";
}
decremento = false;
}
else if (valor == 100 && !decremento){
detener()
}
}, 30);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transicion</title>
</head>
<body>
Clikea en el cuadro para ver el resultado.
<div id="principal">
</div>
</body>
</html>
Hazme saber cualquier duda.
Saludos.
HTMLElement
puedes acceder a suclassList
(para añadir y/o borrar clases de CSS) y a sustyle
para tocar directamente los estilos. – VRoxa el 14 abr. 20 a las 7:59