javascript - 在 JavaScript 运行之前重绘 CSS(以显示进度指示器)

Question

我有一个 JS 例程(由用户触发)可能需要一些时间才能完成。在例程运行时，我想在屏幕上显示进度叠加层。下面是调用例程的代码(这是为响应点击事件而调用的):

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
}

类切换会触发 opacity 和 visibility 的更改(带有过渡动画)。

类更改本身运行良好；第一个在慢例程之前执行，第二个在其他所有内容之后执行。

问题是 #progressOverlay 的视觉外观在 myBigRoutine() 完成后才会改变。
结果是进度叠加层在屏幕上闪烁了一秒钟，然后立即再次隐藏(全部没有动画)

有没有办法强制视觉更新/重绘发生在大型 JavaScript 例程之前(或者，更好的是，与之并行)？

Answer 1

您可以将事件绑定(bind)到动画完成。所以，当动画结束时，只有那时你的代码才会执行​​，

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');

}

$("div#progressOverlay").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
});

我希望，这就是您所需要的:)