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

ej83mcc0 于 2023-08-01 发布在 Go

关注(0)|答案(9)|浏览(109)

我遇到了一个CSS transition属性在页面加载时被触发的问题。
问题是，当我将colortransition应用于一个元素时，（例如：transition: color .2s），然后当页面第一次加载时，我的元素从黑色 Flink 到它自己指定的颜色。
假设我有以下代码：

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。
它的真正恼人的文字 Flink 在网页上。到目前为止，我一直避免使用过渡，除非我真的需要它们，即使如此，我也会小心使用。这将是伟大的，如果有一些真正明显的解决方案，这是我没有看到！
这发生在Google Chrome上。我没有在其他浏览器中测试过。
jsfiddle.net/ShyZp/2（感谢@Shmiddty）

google-chrome

来源：https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load

9条答案

按热度按时间

tsm1rwdh1#

Chrome中有一个**bug**，如果页面包含<form>元素，则会触发CSS过渡。
一个简单的修复方法是在页面的页脚添加一个包含单个空格的脚本标记。

<script> </script>

字符串
您可以在https://crbug.com/332189和https://crbug.com/167083上跟踪该错误。

赞(0）回复(0）举报 2023-08-01

cx6n0qe32#

@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>

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

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

赞(0）回复(0）举报 2023-08-01

s3fp2yjn3#

添加到您的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 class标记页面上的任何元素：

<div class="container css-transitions-only-after-page-load">
...
</div>

型

赞(0）回复(0）举报 2023-08-01

zujrkrfu4#

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 > js >站点标题。

赞(0）回复(0）举报 2023-08-01

oxiaedzo5#

这个公认的答案对我来说不起作用。在Google Chrome中有一个bug，只需在页面中添加脚本**即可避免。即使是一个空脚本也能解决这个问题。

赞(0）回复(0）举报 2023-08-01

o4tp2gmn6#

解决此问题的最佳方法是使用本页答案中的单空格、空<script>修复。不过，我发现了两种方法来解决这个问题。
1.将违规元素的CSS放在HTML文件头中的<style>标记内。只有当从外部样式表调用CSS时，才会发生此错误。
1.将违规元素放入flexbox容器中。这也修复了bug。

赞(0）回复(0）举报 2023-08-01

a1o7rhls7#

你可以只添加一个空的脚本标签到你的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文件

赞(0）回复(0）举报 2023-08-01

eimct9ow8#

为了修复CSS转换从射击对页面加载对我来说，原因是谷歌Adsense脚本头，即.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=..." crossorigin></script>

字符串
修复方法是删除async属性

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=..." crossorigin></script>

型
如果你想知道为什么它的工作原理，我不确定。
我只是觉得谷歌的脚本破坏了它的浏览器有点有趣。花几个小时解决这个问题可不好玩。

赞(0）回复(0）举报 2023-08-01

pb3skfrl9#

你试过使用不同的过渡属性吗？例如：

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

字符串
我在Chrome中工作得很好。
编辑：你已经回答了关于浏览器的问题。您应该尝试使用-webkit-transform

赞(0）回复(0）举报 2023-08-01

我来回答

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

CSS

HTML

9条答案

相关问题

热门标签

最新问答