阻止 CSS 转换在页面加载时触发

Posted

技术标签:

【中文标题】阻止 CSS 转换在页面加载时触发【英文标题】：Stop CSS transition from firing on page load 【发布时间】：2013-01-01 14:39:54 【问题描述】：

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

问题是，当我将color 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。

文本在网页上闪烁真的很烦人。到目前为止，我一直在避免使用过渡，除非我真的需要它们，即使如此我也要小心使用。如果有一些我没有看到的非常明显的解决方案，那就太好了！

这发生在谷歌浏览器上。我没有在其他浏览器中测试过。

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

【问题讨论】：

快速思考：window.onload = function()document.body.className += " loaded";body.loaded p.greentransition:color .2s; 如果您只有少数具有颜色转换的类，这将起作用。我正在寻找一个非 javascript 的答案，最好... 我无法在 Chrome 中重现问题：jsfiddle.net/ShyZp 我在 chrome 中不会出现这个问题，请在 jsfiddle 中向我们提供您的确切代码... 问题可以在这里看到，但这仅在两个声明不在同一个文件中发生时才有效：jsfiddle.net/ShyZp/2 【参考方案1】：

如果页面包含 &lt;form&gt; 元素，Chrome 中有一个 bug 会触发 CSS 过渡。

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

<script> </script>

您可以在https://crbug.com/332189 和https://crbug.com/167083 关注该错误。

【讨论】：

我的文档末尾有&lt;script async src="main.js"&gt;&lt;/script&gt;。删除 async 属性修复了页面加载时不需要的过渡。 ? 和@KyleFox 一样，我的&lt;script&gt; 标签上有一个defer，删除它解决了我的问题。之后我只是将脚本移到了文档的底部。 这对我来说并不一致（以前该错误发生的概率为 100%；而这次更改发生的概率为 50%）。 确实 工作 100% 的时间，这个答案激励我尝试，是重新排序我的文档的 &lt;head&gt; 中的东西，以便我的 CSS 包含在我的 之前 JavaScript 而不是在它之后；我通过移动我的 Google Analytics &lt;script&gt; 标记从字面上解决了这个错误。显然，Chrome 中存在一些竞争条件或计时问题，可以通过解释一些 JS 造成的延迟来解决，尽管精确的机制对我来说很神秘。 FWIW，即使页面上没有 JS，我仍然遇到这个问题。唯一为我修复它的是将 CSS 移动到 &lt;body&gt; 标记的开头。我在&lt;head&gt; 中添加了&lt;link rel="preload" href="main.css" as="style"&gt;，所以它仍然可以立即下载。 我的页面中没有
元素，它解决了这个错误
【参考方案2】：

@Shmiddty cmets 在这个问题上让我思考，所以我一直在玩代码并找到了解决方案。

问题在于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>

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

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

【讨论】：

这是一个成功或失败的解决方案 - 它今天可能有效，但明天当您更改代码时会失败。 我也可以在没有单个 JS 文件的情况下重现该问题，因此此答案无法解决我的问题。被接受的人已经完成了。 这个答案听起来你的问题是缓存。【参考方案3】：

添加到您的 CSS：

.css-transitions-only-after-page-load * 
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  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>

【讨论】：

【参考方案4】：

接受的答案对我没有用。 Google Chrome 中有一个bug，只需在页面中添加脚本即可避免。即使是空脚本也能解决问题。

【讨论】：

惊讶于这个错误已经持续了多年。只是为了增加答案，&lt;script&gt; 标签必须在您遇到问题的 DOM 元素之后。我建议将其放在页面末尾。【参考方案5】：

尼恩posts the solution。问题在于文档头，以及您加载样式表的位置/方式。它类似于 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 > 网站标题。

【讨论】：

只是补充一下，我遇到了同样的问题，结果证明这是一个延迟页面加载的视频。删除 ios 上的视频解决了这个问题。 您可以添加 MDN 或 w3.org 引用来支持您的声明吗？此解决方案不适用于最新的浏览器。【参考方案6】：

解决此问题的最佳方法是使用单个空格，空&lt;script&gt; 修复在此页面上的答案中找到。不过，我发现了另外 2 种方法来解决这个问题。

    将违规元素的 CSS 放在 HTML 文件标题的 &lt;style&gt; 标记内。仅当从外部样式表调用 CSS 时才会出现该错误。 将违规元素放入flexbox 容器中。这也修复了该错误。

【讨论】：

如果你没有js文件不想使用js，这个是解决办法【参考方案7】：

您可以在 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>

您可以将脚本标签放置在您想要的任何位置。在 head 或 body 标记中。

这个问题只发生在开发过程中，因为在网站的最终情况下它肯定会有一个js文件

【讨论】：

那个空白是必要的！谢谢！【参考方案8】：

您是否尝试过使用不同的过渡属性？如：

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

在 Chrome 中对我来说工作得很好。

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

【讨论】：

我正在使用它，对不起，我只是想我会在问题上放一个简化的代码。 好吧，对了，我以为 IE 不支持 CSS3 过渡？ 好了！ :) 你当然是对的！为此一直停留在 Chrome 上，只是为了这个问题而去 IE，甚至没有考虑过*次要细节......

以上是关于阻止 CSS 转换在页面加载时触发的主要内容，如果未能解决你的问题，请参考以下文章

如何延迟从页面加载开始显示Gif？

阻止加载页面

防止动画在初始页面加载时触发

在 Oro 平台上使用 Ajax 加载模板时如何触发页面组件事件？

单击时清除 CSS 菜单悬停状态（通过 ajax 加载的页面）

阻止 CSS 资源