【发布时间】：2011-09-17 04:07:32
【问题描述】：
我已将我的问题缩小到一个相当简单的案例。这有效（至少在 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 的工作方式，很遗憾，我无法重现该问题。
【问题讨论】：
-
您的 HTML 已损坏，请先检查与此无关。这是一个测试 - 它应该是这是一个测试@Kinlan 哎呀，好点子。这是我简化为我的例子的产物；原代码有效。我已经更正了这个问题。不影响问题。我尝试了您的示例，它适用于外部样式表或在 chrome 中没有它。你用的是什么版本的chrome？可能是本地主机上的加载时间太短了？但是我尝试将示例上传到我的主机上，它仍然可以正常工作：easwee.net/test123/HTMLPage.htm 我的版本是 11.0.696.68。@Matt Gibson - 我尝试在另一台电脑上安装最新的 Chrome 新版，但没有发生。不知道有什么可以搞砸的。在其他webkit浏览器上试过，也可以。
标签： google-chrome css webkit css-transitions