He hecho algunos cambios en tu código:
- El índice
i
se calcula a partir del número de elementos de rootElements
(en el código original se está haciendo módulo de 10 y luego comparar con 2, cuando en este caso particular un módulo de 3 o del número de elementos de rootElements
sería más conveniente).
- En lugar de moverlos cambiando el margen, les he puesto una posición relativa a los círculos y se cambia el valor del
top
. De ese modo cuando se mueve uno de los círculos, los otros círculos no se mueven (o no un movimiento no esperado).
- Con CSS le he dado un estado inicial y un valor de
transition
, entonces con JavaScript, teniendo en cuenta que sabemos qué elemento está activo (i
) lo único que tenemos que hacer es quitarle los estilos (para que vuelva al estado inicial), avanzar el valor de i
y darle los estilos que queramos al siguiente elemento a mover. Eliminando el bucle for
que hay en el código que no parece ser realmente necesario.
Aquí puedes ver una demo:
let rootElements = document.querySelectorAll("div.dot");
let i = 0;
setInterval(() => {
// cambiamos el elemento activo al estado original
rootElements[i].style = "";
// actualizamos el valor del elemento activo
i=++i%rootElements.length;
// cambiamos la posición y opacidad del elemento activo
rootElements[i].style.top = "0px";
rootElements[i].style.opacity = 1;
}, 350);
.dot {
display: inline-block;
top: 4px;
position: relative;
transition: all 0.35s;
opacity: 0.4;
font-size: 32px;
float: left;
}
<div class="dots">
<div class="dot">●</div>
<div class="dot">●</div>
<div class="dot">●</div>
</div>
La animación no es exactamente como la de Facebook (que parece la que tratas de replicar) porque no hay una pausa al final o los puntos nunca están los 3 en movimiento (ambas cosas se podrían conseguir con una segunda función y usando setTimeout
con diferentes tiempos en lugar de setInterval
).