Así que estaba tratando de crear una representación visual del tipo de burbuja usando algunas animaciones CSS y JS. Se supone que la animación tiene 10 números en burbujas, y las burbujas flotarán para compararse e intercambiarse si es necesario. El problema que tengo es que parece que no puedo retrasar las animaciones para dejar que las burbujas individuales floten mientras el resto está inactivo. Intenté usar bucles recursivos que toman los índices de la matriz y le dan a los elementos individuales la animación de "rebote", y otra función que elimina la animación después de un tiempo. Aquí está el código.
function animateUp(index){ if(index < 9){ document.getElementById("elem-" + index).style.animation = "bounce 500ms"; document.getElementById("elem-" + index+1).style.animation = "bounce 500ms"; setTimeout(stopAnimationByIndex(index), 600); setTimeout(stopAnimationByIndex(index+1), 600); } else{ return; } setTimeout(animateUp(index + 1), 700); } function sort(){ animateUp(0); } @keyframes bounce { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100%{ transform: translateY(0px); } } <div class="visual-rep"> <div class="arr-container"> <div class="arr" id="elem-0"></div> <div class="arr" id="elem-1"></div> <div class="arr" id="elem-2"></div> <div class="arr" id="elem-3"></div> <div class="arr" id="elem-4"></div> <div class="arr" id="elem-5"></div> <div class="arr" id="elem-6"></div> <div class="arr" id="elem-7"></div> <div class="arr" id="elem-8"></div> <div class="arr" id="elem-9"></div> </div> <br> <br> <button class="sort" onclick="sort()">Sort</button> </div>Luego llamo a la función cuando se hace clic en un botón. La animación no funciona y no hay demora en la animación. A todas las burbujas se les asigna la animación al mismo tiempo y no hay demora entre ellas. Esto no parece funcionar, ¿hay alguna otra forma de hacerlo?