我有一个 JS 例程(由用户触发)可能需要一些时间才能完成。在例程运行时,我想在屏幕上显示进度叠加层。下面是调用例程的代码(这是为响应点击事件而调用的):
function handleClick() {
$('div#progressOverlay').removeClass('hidden');
myBigRoutine();
...
$('div#progressOverlay').addClass('hidden');
}
类切换会触发 opacity
和 visibility
的更改(带有过渡动画)。
类更改本身运行良好;第一个在慢例程之前执行,第二个在其他所有内容之后执行。
问题是 #progressOverlay
的视觉外观在 myBigRoutine()
完成后才会改变。
结果是进度叠加层在屏幕上闪烁了一秒钟,然后立即再次隐藏(全部没有动画)
有没有办法强制视觉更新/重绘发生在大型 JavaScript 例程之前(或者,更好的是,与之并行)?
最佳答案
您可以将事件绑定(bind)到动画完成。所以,当动画结束时,只有那时你的代码才会执行,
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/