Question

我把我的问题缩小到一个相当简单的案例。这有效（至少在Chrome中），显示一个“弹出窗口”，大部分都在屏幕外，屏幕右侧有一片。当我将鼠标悬停在可见部分上时，整个弹出窗口会滑入视图：

<!DOCTYPE html>
<html>
<head>
  <title>Popout test</title>
  <style>
  #popout {
    -webkit-transition: left 0.5s ease-in-out;
    width: 200px;
    height: 200px;
    background-color: #cde;
    border: 4px solid black;
    padding: 4px;
    left: -180px;
    position: absolute;
    top: 250px;

  }

  #popout:hover {
    left: -4px;
  }  
  </style>
</head>
<body>
  <div id="popout">This is a test</div>
</body>
</html>

但是，如果我将那个确切的CSS移动到外部样式表中：

<!DOCTYPE html>
<html>
<head>
  <title>Popout test</title>
  <link rel="stylesheet" href="popout.css" />
</head>
<body>
  <div id="popout">This is a test</div>
</body>
</html>

popout.css：

#popout {
    -webkit-transition: left 0.5s ease-in-out;
    width: 200px;
    height: 200px;
    background-color: #cde;
    border: 4px solid black;
    padding: 4px;
    left: -180px;
    position: absolute;
    top: 250px;

}

#popout:hover {
  left: -4px;
}

...效果保持不变，但页面加载弹出窗口显示为“弹出”并轻松退出屏幕。直接在html页面的<style>中使用样式，如第一个示例中所示，这不会发生;弹出窗口开始“关闭屏幕”，即left: -180px正如我所期望的那样。

我想知道这是否是一个“无格式内容的闪现”，还有一个令人烦恼的是，由于过渡效应，它实际上是一个非常明显，缓慢的效果？

任何人都可以告诉我为什么会发生这种情况，以及最不可避免的方法是什么？

由于jsfiddle的工作方式，不幸的是我无法在那里重现问题。

Answer 1

谢谢@easwee，帮助确认问题不是 :)我现在已经找到导致问题的原因了。这是Chrome的AdBlock扩展程序。如果我禁用此扩展程序，我看不到问题。

如果它对其他任何人都有帮助来追踪此问题，您可以使用新的“隐身”窗口快速测试扩展程序是否导致问题 - Chrome中的Icognito窗口禁用所有扩展程序。

外部样式表中定义的CSS转换会导致页面加载转换

1 个答案: