96

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

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

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

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

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

4

8 回答 8

133

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

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

<script> </script>

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

于 2017-03-23T07:23:25.530 回答
52

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

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

于 2013-01-19T15:52:54.050 回答
16

添加到您的 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>
于 2013-11-15T13:59:35.883 回答
6

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

于 2015-06-02T21:17:03.390 回答
6

接受的答案对我没有帮助。谷歌浏览器中有一个错误，只需在页面中添加脚本即可避免。即使是空脚本也能解决问题。

于 2016-10-17T21:21:39.030 回答
5

解决此问题的最佳方法是使用<script>本页答案中的单个空格、空白修复。但是我发现了另外两种解决这个问题的方法。

  1. 将违规元素的 CSS 放置在<style>HTML 文件标题中的标记内。该错误仅在从外部样式表调用 CSS 时发生。
  2. 将有问题的元素放入flexbox容器中。这也修复了错误。
于 2017-04-08T15:08:00.793 回答
3

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

于 2020-10-07T20:33:10.387 回答
-2

Have you tried using different transition properties? Such as:

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

Worked just fine for me in Chrome.

EDIT: You answered the question about browsers already. You should try using -webkit-transform

于 2013-01-17T22:56:18.973 回答