如何让翻译相互借鉴

Question

我正在创建一个排序算法可视化工具，它使用关键帧动画内的翻译来交换 div 元素。但是，如果动画对同一元素作用两次，则其位置会重置到开头，并且动画会变得混乱。我怎样才能使它的位置保存并且新动画从上一个动画停止的位置开始滑动？

const elements = [];
function runSort(){
    for(var i = 1; i <= 5; i++){
        elements.push(document.getElementById(i));
    }
    bubbleSort();
}

async function bubbleSort(){
    for(var i = elements.length -1; i > 0; i--){
        for(var j = 0; j < i; j++){
            if(parseInt(elements[j].innerHTML) > parseInt(elements[j+1].innerHTML)){
                elements[j].style.animationName = "slideRight";
                elements[j+1].style.animationName = "slideLeft";
                await sleep("1000"); //let animation finish running 

                temp = elements[j];
                elements[j] = elements[j+1];
                elements[j+1] = temp
            }
        }
    }
    elements.forEach((element) => console.log(element.innerHTML));  //prints sorted array
}

//to let animation finish running
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

这是我的 HTML：

    <div id = container>
        <div id = "1" class = element >1</div>
        <div id = "2" class = element >12</div>
        <div id = "3" class = element >4</div>
        <div id = "4" class = element >3</div>
        <div id = "5" class = element >19</div>
    </div>

Answer 1

我不知道，因为没有附加CSS

但我认为使用

animation-fill-mode: forwards;

会让你更接近你想要做的事情。

我建议您调整确切的布局或宽度。