为什么我需要在jQuery调用之间放置1ms setTimeout（）？

我正在使用CSS过渡有点倒计时吧：为什么我需要在jQuery调用之间放置1ms setTimeout（）？

.livebar { 
    background-color: black; 
    transition: width 15s linear; 
    width: 100%; 
    height: 5px; 
}

此代码不能正常工作（在Chrome），在某种意义上说，没有过渡。宽度会立即进入0：

$("#barbag").append("<div class='livebar'></div>"); 
$(".livebar").css("width", "0");

...但是这个代码精美的作品：

$("#barbag").append("<div class='livebar'></div>"); 
setTimeout(function(){$(".livebar").css("width", "0")}, 1);

此外，在控制台作品分别做了两个语句，而是粘贴在这两个失败。

似乎Chrome需要一些时间后创建.livebar股使过渡“积极”。这是一个已知的错误，还是我做错了什么，或者是完全不同的事情？

来源

2017-07-29 Lars P

我认为这是与从堆栈event loop

事件循环处理功能，以及使用的setTimeout回调函数会在堆栈中，而（“.livebar‘）得到排队。CSS（’宽度” ，“0”）;只要处理器看到它就会运行。

零延迟实际上并不意味着回拨将在零毫秒后熄灭。以延迟0（零）毫秒为单位调用setTimeout不会在给定时间间隔后执行回调函数。执行取决于队列中等待任务的数量。

所以在你的情况下，动画必须等待$（“＃barbag”）。append（“”）;先完成然后申请CSS。因此，它需要堆叠排队，否则会触发得太早。

来源

2017-07-29 19:18:45

您可以使用此代码修复问题：

演示：https://output.jsbin.com/basusos

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#barbag").append("<div class='livebar'></div>"); 
    $(".livebar").stop(true, true).animate({width: 0}, 100); 
}); 
</script> 
</head> 
<body> 
    <div id="barbag">Animate Width Zero</div> 
</body> 
</html>

来源

2017-07-29 19:26:37

这是使用JS的动画不过，当CSS是更适合这是不理想的。 –

这几乎肯定会起作用，就像我的'setTimeout（）'修复程序一样，但我想了解这里发生了什么！ –

为什么我需要在jQuery调用之间放置1ms setTimeout（）？

回答

相关问题