外部样式表中定义的CSS转换会导致页面加载过渡 [英] CSS transition defined in external stylesheet causes transition on page load
问题描述
我已经将我的问题缩小到一个相当简单的情况。这是（在Chrome中，至少），显示一个弹出，大多是离屏，在屏幕上的右手边切片。当我将鼠标悬停在可见部分时，整个弹出窗口会滑入视图：
<！DOCTYPE html&
< html>
< head>
< title>弹出测试< / 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>这是一个测试< / div>
< / body>
< / html>然而，如果我把那个确切的CSS移动到外部样式表：
$ b < b
<！DOCTYPE html>
< html>
< head>
< title>弹出测试< / title>
< link rel =stylesheethref =popout.css/>
< / head>
< body>
< div id =popout>这是一个测试< / 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工作方式，我不能重现的问题，很遗憾。
解决方案感谢@easwee帮助确认问题 ）我现在已经跟踪了什么导致的问题。这是Chrome的 AdBlock 扩展程序。如果我停用此扩展程序，我看不到问题。
如果其他人跟踪此问题有帮助，您可以快速测试看是否有扩展通过使用新的无痕窗口导致问题 - 所有扩展程序在Chrome中针对隐身窗口停用。
I've narrowed down my issue to a fairly simple case. This works (in Chrome, at least), displaying a "pop-up" which is mostly off-screen, with a slice of the right hand side on screen. When I hover over the visible part, the whole pop-up slides into view:
<!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>
However, if I then move that exact CSS into an external stylesheet:
<!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;
}
...the effect remains the same, but on page load the pop-up appears "popped out" and eases back off screen. With the style directly in a <style> in the html page, as in the first example, this doesn't happen; the pop-up starts "off screen", i.e. at left: -180px as I would expect.
I'm wondering if this is a "flash of unstyled content", with the added annoyance that because of the transition effect, it's actually a very obvious, slow effect?
Can anyone tell me for sure why this happens, and what's the least hacky way to avoid it?
Because of the way jsfiddle works, I can't reproduce the problem there, unfortunately.
解决方案 Thanks, @easwee, for help in confirming what the problem wasn't :) I've now tracked down what's causing the problem. It was the AdBlock extension for Chrome. If I disable this extension, I don't see the problem.
In case it's helpful for anyone else tracking down this problem, you can quickly test to see if an extension is causing an issue by using a new "Incognito" window -- all extensions are disabled for Icognito windows in Chrome.
这篇关于外部样式表中定义的CSS转换会导致页面加载过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
