Javascript 动画气泡排序算法

我正在尝试做一个简单的bubblesort算法动画。我有几个div，里面有文字：

我的目标是交换div中的文本，因为算法正在执行交换。我最初的方法是获取所有div，循环遍历它们，并在交换时更改“innerHTML”。这个html更改发生得太快了，所以有没有办法减慢它的速度，使它看起来像是动画

<div class="box">
  <p>8</p>
</div>
<div class="box">
  <p>2</p>
</div>
<div class="box">
  <p>10</p>
</div>
<div class="box">
  <p>12</p>
</div>

八,

二,

十,

十二,

如果您使用的是最新的浏览器，您可以尝试以下内容（自包含的css和JS）。使用CSS转换和promise以及异步/等待语法。您可以在这里直接运行代码段

文件
.box1{
高度：100px；
宽度：100px；
背景：红色；
显示：内联块；
垂直对齐：中间对齐；
变换：变换1s线性；
}
p{
文本对齐：居中；
颜色：黄色；
字体大小：30px；
}
八,

二,

十二,

十,

二,

一,

var divs=document.getElementsByTagName（“div”）；
var firstNumberHTML=divs[0].getElementsByTagName（“p”）；
var maxNumberDiv=divs[0]；
var maxNumber=Number（firstNumberHTML[0].innerHTML）；
异步函数bubbleSort（）{
对于（变量i=1；i{
设置超时（（）=>res（“延迟”），1000；
})
如果（maxNumber>number）{
常量偏移量=divs[i]。getBoundingClientRect（）.x-
maxNumberDiv.getBoundingClientRect（）.x；
让prevTranslateMaxDiv=maxNumberDiv.style.transform.replace（“translateX”），replace（（“，”）.replace（“）”，”）.replace（“px”），replace；
prevTranslateMaxDiv=编号（prevTranslateMaxDiv）==NaN？0:编号（prevTranslateMaxDiv）；
maxNumberDiv.style.transform=`translateX（${prevTranslateMaxDiv+offset}px）`；
divs[i].style.transform=`translateX（-${offset}px）`；
}否则{
maxNumberDiv=divs[i]；
maxNumber=数字；
}      
}
}
泡泡运动（）；

使用

setTimeout

、

setInterval

或

requestAnimationFrame

建议使用后者，但更难掌握使用循环很难实现这一点，因为它涉及异步任务，如等待/设置动画。相反，首先尝试使用一个额外的按钮使其工作，单击该按钮将进入下一步。完成此操作后，卸下按钮并使用

setInterval

触发它。