笨蛋:https://plnkr.co/edit/6aBljcPRK78pLegnyL5p
好吧，这个例子(在 plunker 中，也作为代码片段附在这个问题上)非常简单。有一个可以单击的 div(“按钮”)。单击时，其中会显示一个加载元素。当“操作”完成时(此处由 setTimeout 替换)，加载元素应该消失，并且消息区域出现在 div 上方。
我看到的效果(只有在“操作”立即完成时才会发生)是加载元素(在我的示例中是一个 Font Awesome 图标)瞬间呈现在框外。
注意:第一次单击该元素时，可能根本不会显示加载图标。只需使用“重置”按钮并再次单击即可。对我来说，它每次都可以生产。
由于两个元素的显示属性同时更改，我希望浏览器将加载图标保留在框内，直到它消失。然而，情况似乎并非如此。
我使用纯 HTML/CSS/Javascript(好吧，Font Awesome)以避免任何错误/奇怪的行为。
这就是浏览器的渲染方式吗？除了使用超时来延迟设置任一属性(我认为对于这个用例来说这真的很难看)之外，是否有办法避免这种影响？我不相信这是纯粹的视觉效果(我的眼睛在骗我)，但它可能是......
我已经尝试了以下方法来查看是否有任何变化(但没有):
- 将图标绝对定位在“.content”元素内。
- 用静态图标替换了图标
<img>标签。 - 明确隐藏图标元素，而不仅仅是父元素。
#messageBox {
display: none;
height: 50px;
background-color: #cccccc;
margin: 10px;
}
#element .content {
position: relative;
width: 120px;
margin: 0;
padding: 10px;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 14px;
text-align: center;
}
#element .content .shadow {
height: 124px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
border: 1px dashed #ccc;
padding-top: 32px;
color: #bbb;
cursor: pointer;
}
#element .content .shadow:hover {
color: #888;
border-color: #999;
}
#element .content .shadow.inactive {
color: #bbb;
border-color: #999;
cursor: default;
padding-top: 48px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Positioning plunker</title>
<link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script type = 'text/javascript'>
window.doSomething = function() {
var action = document.getElementById('actionButton');
var icon = document.getElementById('icon');
var message = document.getElementById('messageBox');
icon.style.display = "block";
window.setTimeout(function() {
message.style.display = 'block';
icon.style.display = 'none';
}, 50);
};
window.reset = function() {
var action = document.getElementById('actionButton');
var icon = document.getElementById('icon');
var message = document.getElementById('messageBox');
action.style.display = 'block';
icon.style.display = 'none';
message.style.display = 'none';
};
</script>
<div id="messageBox">Some box containing stuff to push down the content...</div>
<div id="element">
<div class="content" style="border:1px solid black; padding: 0">
<div id="actionButton" class="shadow" onclick="doSomething();">
<i id="icon" style="display: none" class="fa fa-cog fa-2x text-info"></i>
</div>
</div>
</div>
<button onclick="reset(); return false;">Reset</button>
</body>
</html>最佳答案
我拍了一段视频，并通过点击制作了一个慢动作 gif。我很确定这只是一种错觉。以下是视频中的八帧:
我首先看到了这个。看起来像是经典的“笼中鸟”错觉。
window.setInterval(function() {
icon.style.display = "block";
message.style.display = "none";
}, 60)
window.setInterval(function() {
message.style.display = 'block';
icon.style.display = 'none';
}, 50);
关于javascript - 元素分秒错位渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35313320/