元素分裂第二出来的地方呈现

Plunker：https://plnkr.co/edit/6aBljcPRK78pLegnyL5p 元素分裂第二出来的地方呈现

好了，所以该示例（在plunker，并且还附加为代码段对这个问题）是相当简单的。有一个div（“按钮”），可以点击。点击后，其中会显示一个加载元素。当“操作”完成时（在此用setTimeout取代），加载元素应该消失，并且在div上方出现消息区域。

我看到的效果（以及只有在“操作”完成后才会立即发生）的效果是加载元素（在我的示例中是Font Awesome图标）在一秒内呈现在框外。

注意：首次单击元素时可能不会显示加载图标。只需使用“重置”按钮并再次单击。对我而言，每次都可以生产。

由于两个元素的display属性同时发生变化，所以我期望浏览器将加载图标保存在box中，直到它消失。但是，这似乎并不是这种情况。

我已经使用了纯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="[email protected]*" 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>

来源

2016-02-10 Mana

我拍了视频，并作出从点击慢动作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);

来源

2016-02-18 16:34:25

元素分裂第二出来的地方呈现

回答

相关问题