Question

Plunker：https://plnkr.co/edit/6aBljcPRK78pLegnyL5p

好吧，所以示例（在plunker中，也作为此问题的代码片段附加）非常简单。有一个可以点击的div（“按钮”）。单击时，会在其中显示加载元素。当“operation”结束时（这里用setTimeout替换），加载元素应该消失，并在div上方出现一个消息区域。

我看到的效果（仅当“操作”立即完成时才会出现）是加载元素（在我的示例中为Font Awesome图标）在框外渲染一瞬间。< / p>

注意：第一次单击元素时，可能不会显示加载图标。只需使用“重置”按钮，然后再次单击。对我来说，它每次都可以产生。

由于两个元素的显示属性同时被更改，我希望浏览器将加载图标保留在框内，直到它消失为止。但是，情况似乎并非如此。

我使用纯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>

Answer 1

我拍摄了一段视频，并通过点击制作了慢动作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);

元素分裂 - 不合适的渲染

1 个答案: