原生js如何实现DOM节点冒泡排序的可视化？

Question

比方说下图中，点击升序或者降序会对蓝色的li元素进行排序

我的实现升序的代码如下：

for(var i = 0; i < lis.length -1 ; i++){

    for(var j = 0; j < lis.length - i - 1; j++){

        if(lis[j].style.height > lis[j+1].style.height){

            ul.insertBefore(lis[j+1],lis[j]);

        }

    }

}

可点击后的效果是干蹦，不是动画过渡的。请问如何在不依赖任何库和框架的情况下，实现冒泡排序的可视化呢？