1。将一个“ preload”类添加到body元素：

Question

我遇到了在页面加载时触发的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 。

让网页上的文字闪烁真的很烦人。到目前为止，我一直在避免使用转换，除非我真的需要它们，即使我小心翼翼地使用它。如果有一些非常明显的解决方案，我没有看到它会很棒！

这种情况发生在Google Chrome上。我还没有在其他浏览器中测试过。

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

Answer 1

Chrome中有 bug ，如果网页包含<form>元素，则会导致CSS过渡。

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

<script> </script>

您可以点击https://crbug.com/332189和https://crbug.com/167083上的错误。

Answer 2

@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所建议的那样）文本已被分配了默认的浏览器颜色，然后使用我的CSS transition声明淡入其样式颜色。

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

Answer 3

添加到您的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>

Answer 4

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

Answer 5

This是我能够可靠工作的唯一解决方案。

1。将一个“ preload”类添加到body元素：

<body class="preload">

2。添加以下CSS：

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
 }

3添加以下JS：

$(document).ready(function() {
  $("body").removeClass("preload");
});

Answer 6

nienn 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＆gt; js＆gt;网站标题。

Answer 7

解决此问题的最佳方法是使用此页面上的答案中找到的单个空格，空<script>修复程序。但是我找到了另外两种方法来解决这个问题。

将违规元素的CSS放在HTML文件标题中的<style>标记内。只有从外部样式表调用CSS时才会出现该错误。
将有问题的元素放在flexbox容器中。这也解决了这个问题。

Answer 8

您只需将一个空脚本标记添加到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文件

Answer 9

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

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

在Chrome中为我工作得很好。

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

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

9 个答案:

1。将一个“ preload”类添加到body元素：

2。添加以下CSS：

3添加以下JS：