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

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

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

类切换触发opacity和visibility的更改（带有过渡动画）。

上课的变化本身很好。第一个在慢速例程之前执行，第二个在其他所有例程之后执行。

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

有没有一种方法可以强制视觉更新/重画发生在大型JavaScript例程之前（或者更好的是与之并行）？

最佳答案

您可以将事件绑定到动画完成。因此，动画制作完成后，您的代码才会执行​​，

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

}

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

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

关于javascript - 在JavaScript运行之前重新绘制CSS(以显示进度指示器)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10763893/