由于某种原因，过渡从页面加载开始 [英] Transition starting on page load for some reason
问题描述
更新：当我在内部放置CSS时，问题就消失了。我进入了chrome浏览器的开发工具，并比较了重新加载页面时发生的情况。第一张图片使用内部CSS，第二张图片使用外部样式表，您可以看到 background-color 属性的不同结果：
CSS
a {
color：#fff;
边界：无；
保证金：20px；
padding：10px 20px;
显示：inline-block;
字体：粗体18px sans-serif;
背景：＃fd7c2a;
文字修饰：无；
-webkit-transition：背景5s; / *对于Safari 3.0到6.0 * /
转换：背景5s； / *对于现代浏览器* /
}
a：hover {
背景：＃3cc16e;
}
HTML
<！DOCTYPE html>
< html lang = zh-CN>
< head>
< meta charset = UTF-8 />
<元名称=说明 content = />
<！-指定页面的描述。搜索引擎可以选择此描述以显示搜索结果->
<元名称=关键字 content = />
<！-指定以逗号分隔的关键字列表-与页面相关->
< meta name = viewport content = width = device-width，initial-scale = 1.0 />
< link rel = stylesheet href = styles.css />
< title>< / title>
< / head>
< body>
< p>< a href =＃>将鼠标悬停在我身上< / a>< / p>
< / body>
< / html>
我解决了这个问题，一直在通过Google寻求答案。解决方案是添加< script> < / script> 在html文件中以空格分隔的开始和结束标记。显然，这是前面提到的浏览器中的错误。
Update: when I put the CSS internally, the problem goes away. I went in the dev tools on my chrome and compared what was happening when I reloaded the page. First image is with internal CSS, the second one is with external stylesheet, you can see different results for the background-color property:
Initial post: I have no idea why this is happening, here's a demonstration. Basically, the a takes some time to appear fully on the page.
The time it takes to 'fully' appear is the same duration specified in transition: background 5s; as in 5 seconds.
Here's the same code on another page where the effect is not observed, I also opened it in the same browser.
Here's my code in Visual Studio and in Chrome, the same behavior is observed in Edge but not in Firefox, in Firefox it just loads as it should and the :hover effects work properly. All 3 browsers are updated to their latest versions at the time of writing.
This only happens when I link to an external CSS stylesheet. When I copy the css to the html file the problem goes away!!!
CSS
a {
color: #fff;
border: none;
margin: 20px;
padding: 10px 20px;
display: inline-block;
font: bold 18px sans-serif;
background: #fd7c2a;
text-decoration: none;
-webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
transition: background 5s; /* For modern browsers */
}
a:hover {
background: #3cc16e;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
<meta name="keywords" content="" />
<!-- Specifies a comma-separated list of keywords - relevant to the page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title></title>
</head>
<body>
<p><a href="#">Hover on me</a></p>
</body>
</html>
I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.
这篇关于由于某种原因，过渡从页面加载开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
