除非我使用 setTimeout，否则不透明度动画不起作用答案

【问题标题】：animation of opacity does not work unless I use a setTimeout除非我使用 setTimeout，否则不透明度动画不起作用
【发布时间】：2020-01-22 06:17:30
【问题描述】：

有人能解释一下为什么没有 setTimeout 下面的代码就不能工作吗？

<html>
 <script src="js/jquery.js"></script>
 <style> 
div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}
</style> 
<div id="foo">toto</div>

<script>
                        $("#foo").css("transition","0s");
                        $("#foo").css("opacity",0);
                        setTimeout(function(){
                            $("#foo").css("transition","5s");
                            $("#foo").css("opacity",1);             
                        },1);
</script>
</html>

该脚本应该将 div 的不透明度重置为 0，然后在 5 秒内逐渐达到最大不透明度。没有计时器就没有动画：不透明度为 1。我知道我可以使用帧来制作动画，但这是当时我脑子里想的第一件事，现在我想知道为什么这不起作用（没有计时器）

工作（带计时器）

$("#foo").css("transition","0s");
	$("#foo").css("opacity",0);
  	setTimeout(function(){
		$("#foo").css("transition","5s");
		$("#foo").css("opacity",1);				
	},1);

div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="foo">toto</div>

不工作

$("#foo").css("transition","0s");
	$("#foo").css("opacity",0);

		$("#foo").css("transition","5s");
		$("#foo").css("opacity",1);

div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="foo">toto</div>

【问题讨论】：

删除 setTimeout 并添加它会产生相同的结果..
@EugeneSunic 添加什么？
你能把这个放到 fiddle.js 中并附上链接
元素.style 对象的更新不会立即触发重绘窗口中的内容。浏览器通常让 JavaScript 运行，并且只在脚本完成后才重新绘制。
如果要立即运行动画，则需要使用动画而不是过渡。

标签： javascript jquery animation opacity

【解决方案1】：

仅仅是因为你的脚本是在页面渲染的同时执行的，也就是说，你的页面是用那些样式渲染的，所以没有变化，然后没有过渡，当你添加setTimeout时，你会延迟更改渲染后触发css过渡动画。

在这种情况下，您可以使用onLoad 事件，在页面加载和呈现后设置您的更改。

_ 如果你想要一个纯粹的 CSS 解决方案，请关注这个帖子： css3 transition animation on load, without javascript ?

$(window).on('load', function () {
  $("#foo").css("opacity",1);        
});

div {
 height:400px;
 background-color:red;
 opacity:0;
 transition:5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo">toto</div>

【讨论】：

这是一个简化的示例。当 div 进入视口时，样式会发生变化。
简单或复杂的结果都是一样的，你需要等到页面完全加载后才能应用你的更改，因为'onload'事件
我不认为这是调用 func 时的问题：您可以在事件上运行 func（或在加载完成后），结果将是相同的。初始不透明度按样式设置为 1（对于非 js 浏览器）。然后我将其设置为 0，然后在 func 中一次性设置为 1。我希望浏览器理解它应该从 0 到 1 动画。事实并非如此。如果您不使用超时让浏览器中断，则 opacity = 1 会覆盖（或从缓存中推出） opacity = 0。
好吧，你问为什么，告诉你（在我看来）是原因......现在由你来处理浏览器执行生命周期......如果你找到任何方法有趣的事情让我保持联系，好看;-)