停止在页面加载时触发CSS过渡

79

我transition在页面加载时触发了CSS属性beeing的问题。

问题是，当我将acolor transition应用于元素时（例如：），transition: color .2s然后在页面首次加载时，我的元素从黑色闪烁到它自己分配的颜色。

假设我有以下代码：

的CSS

p.green {
   color: green;
   transition: color .2s;
   -moz-transition: color .2s;
   -webkit-transition: color .2s;
   -o-transition: color .2s;
}

p.green:hover {
   color: yellow;
}

的HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <p class="green">The Flashing Text</p>
</body>
</html>

在页面加载，我p.green会褪色从black到green。

我不想将颜色转换应用于:hover伪类，因为那样不会将转换应用于onMouseLeave。

我真的很讨厌在网页上闪烁文本。到目前为止，除非我确实需要过渡，否则我一直在避免使用过渡，即使如此，我也要谨慎使用。如果有一些我看不到的真正明显的解决方案，那就太好了！

这发生在Google Chrome上。我没有在其他浏览器中进行过测试。

jsfiddle.net/ShyZp/2 （感谢@Shmiddty）

html  css  google-chrome 
— 尼恩
source
2
快速思考：window.onload = function(){document.body.className += " loaded";} body.loaded p.green{transition:color .2s;}
— Shmiddty 2013年
1
如果您只有少数具有颜色转换的类，那将起作用。我正在寻找非JavaScript答案，最好...
— nienn 2013年
我无法在Chrome中重新创建问题：jsfiddle.net/ShyZp
— Shmiddty 2013年
在chrome中我不会遇到这个问题，请在jsfiddle中为我们提供您的确切代码...
— Ilan Biala
1
可以在这里看到问题，但这仅在两个声明不在同一个文件中时才有效：jsfiddle.net/ShyZp/2
— Shmiddty 2013年

Answers:

107

有一个错误Chrome中，如果页面包含<form>元素，则会导致CSS转换触发。

一个简单的解决方法是将包含单个空格的脚本标签添加到页面的页脚。

<script> </script>

您可以通过https://crbug.com/332189和https://crbug.com/167083跟踪该错误。

— 斯宾塞
source
2
我<script async src="main.js"></script>在文档末尾。删除该async属性可修复页面加载时不必要的过渡。👍–
— 凯尔·福克斯
2
像@KyleFox一样，我defer在<script>标签上放了一个，然后删除它解决了我的问题。之后，我只是将脚本移至文档的底部。
— jonathanbell '18
这对我来说前后不一致（以前该错误发生在100％的时间；此更改发生在50％的时间）。什么做工作的时候，它这个答案激励我去尝试，在重新排序的东西100％的<head>我的文档，这样我的CSS被列入前的后它，而不是我的JavaScript; 我通过移动Google Analytics（分析）<script>标签从字面上解决了该错误。尽管确切的机制对我来说是未知的，但显然在Chrome中存在一些竞赛条件或计时问题，这些问题可以通过解释一些JS引起的延迟而消除。
— Mark Amery
2
FWIW，即使页面上没有JS，我仍然遇到这个问题。对我来说唯一修复的问题是将CSS移到了<body>标记的开头。我添加<link rel="preload" href="main.css" as="style">了，<head>因此仍可以立即下载。
— Ted Whitehead
43

@Shmiddty对这个问题的评论让我开始思考，因此我一直在研究代码并找到了解决方案。

问题出在header声明上。通过反转CSS和JS外部文件调用的顺序（即将CSS放在JS之前），颜色转换会在页面加载时停止触发：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

我的猜测是，在DOM准备就绪后，JS的加载将CSS的加载延迟了。到那时（如@Shmiddty所建议的那样），文本已经被分配了默认的浏览器颜色，然后使用我的CSStransition声明淡入其样式颜色。

**我仍然不确定这是否是最合适的方法，但是它可以工作。如果有人有更好的解决方案，请随时添加或编辑。

— 尼恩
source
这是一个命中注定的解决方案-它可能在今天起作用，但是明天在您进行代码更改时会失败。
— 约翰·大原
我也可以在没有单个JS文件的情况下重现问题，因此此答案无法解决我的问题。被接受的完成。
— Alvaro
这个答案听起来像您的问题正在缓存。
— TylerH
10

添加到您的CSS：

.css-transitions-only-after-page-load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

并将一些代码添加到您的全局JavaScript文件中：

$(document).ready(function () {
    $(".css-transitions-only-after-page-load").each(function (index, element) {
        setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10);
    });
});

现在，您可以使用css-transitions-only-after-page-load类标记页面上的任何元素：

<div class="container css-transitions-only-after-page-load">
...
</div>
— 罗曼·普希金
source
4

解决此问题的最佳方法是使用<script>此页面答案中的单个空格，空修复程序。但是，我发现了2种其他方法可以解决此问题。

  1. 将有问题的元素的CSS<style>放在HTML文件标题中的标记中。该错误仅在从外部样式表调用CSS时发生。
  2. 将有问题的元素放在flexbox容器中。这也修复了该错误。
— DR01D
source
如果您没有js文件并且不想使用js，这就是解决方案
— CodeWeis
4

nienn发布了解决方案。问题出在文档头以及在何处/如何加载样式表。它类似于PHP中的“无法修改标题，它们已经发送”，除了HTML / CSS / webkit不会向您抛出错误。

我遇到了这个确切的问题，请阅读nienn的帖子，然后重新检查自己的头。这是我以前的内容。

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <title>My title</title>
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
</head>

注意，我没有加载任何JS，也请注意指定标题后如何加载样式表页面。将样式表引用移至“后退”后，它就像一种魅力。最终结果如下所示：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
    <title>My title</title>
</head>

不仅是JavaScript可能导致此问题，而且网站标题也是如此。我想一个好的经验法则是CSS> JS>网站标题。

— 兰多
source
补充一点，我遇到了同样的问题，事实证明这是一段视频，延迟了页面加载。在iOS上删除视频可解决此问题。
— 斯科特
3

被接受的答案对我来说没有用。只需在页面中添加脚本，就可以避免Google Chrome中的错误。即使是空脚本也可以解决问题。

— 马努塞普
source
对此错误已经持续多年感到惊讶。只是为了增加答案，这些<script>标记必须位于遇到问题的DOM元素之后。我建议将其放在页面的末尾。
— 肯尼·沃登
嗯 spencer.sm给出的答案基本上是充实的副本，现在票数高于您。你们是第一位的，但是据我所知，由于他的身价已经超过了他，你们的价值不再增加。也许是时候删除它了？
— Mark Amery
0

您可以将一个空脚本标记添加到html文件中。

像这样：

<script type="text/javascript"></script>

但应至少包含一个字符。空格或换行（\ n）或注释（//）或其他内容

<script type="text/javascript"> </script>

<script type="text/javascript">
</script>

<script type="text/javascript">//</script>

或者只是将js文件链接到您的html文件

<script type="text/javascript" src="js/script.js"></script>

您可以将脚本标签放置在所需的任何位置。在头部或身体上的标签。

仅在开发期间会发生此问题，因为在网站的最终情况下，肯定会有一个js文件

— 咏叹调
source
-2

您是否尝试过使用其他过渡属性？如：

-moz-transition: color .2s; /* Firefox 4 */
-webkit-transition: color .2s; /* Safari and Chrome */
-o-transition: color .2s; /* Opera */

在Chrome中对我来说效果还不错。

编辑：您已经回答了有关浏览器的问题。您应该尝试使用-webkit-transform

— 巴纳特
source
抱歉，我正在使用该代码，只是以为我已在该问题上放置了简化的代码。
— nienn 2013年
好的，顺便说一句，我以为IE不支持CSS3转换？
— Banath 2013年
好吧，你去！:)你当然是对的！为此一直被困在Chrome上，只是出于这个问题而进入IE，甚至都没有考虑过*次要细节...
— nienn 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.