Question

我正在制作一个带有css过渡的小倒计时栏：

.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 div以使转换“活跃”后，Chrome似乎需要一些时间。这是一个已知的错误，还是我做错了什么，或者是完全不同的事情？

Answer 1

我认为这与event loop

有关

事件循环过程函数来自堆栈，而setTimeout使用一个回调函数将在堆栈中排队，而（＆＃34; .livebar＆＃34;）。css（＆＃34; width＆＃34;，＆＃34 ; 0＆＃34）;只要处理器看到它就会运行。

零延迟实际上并不意味着回叫将在零毫秒后触发。在给定间隔之后，以延迟0（零）毫秒调用setTimeout不会执行回调函数。执行取决于队列中等待任务的数量。

所以在你的情况下，动画必须等待$（＆＃34;＃barbag＆＃34;）。追加（＆＃34;＆＃34;）;首先完成然后申请CSS。因此，它需要在堆栈中排队，否则会过早触发。

Answer 2

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

演示：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>

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

2 个答案: