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

我遇到了与 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;
}

超文本标示语言

<!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伪类，因为这样就不会应用转换 在鼠标离开。

让文字在网页上闪烁真的很烦人。到目前为止，我一直避免使用过渡，除非我真的需要它们，即使如此，我使用谨慎。如果有一些真正明显的解决方案，我没有看到这将是伟大的！

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

( jsfiddle.net/shyzp/2@Shmiddty)

60925 次浏览
小开

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

小开
最佳答案

@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.

The problem lies on the header declarations. By inverting the order of the CSS and JS external file calls - i.e. putting the CSS before the JS - the color transitions stop firing on page load:

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

My guess is that the JS load was delaying the load of the CSS to after the DOM was ready. By that time (as @Shmiddty suggested) the text had already been assigned the default browser color and was then using my CSS transition declaration to fade into its styled color.

** I'm still not sure this is the most appropriate way to do it, but it works. If anyone has a better solution please feel free to add or edit.

小开

Add to your 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;
}

And add some code to your global JavaScript file:

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

Now you can mark any element on your page with css-transitions-only-after-page-load class:

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

nienn posts the solution. The problem lies in the document head, and where/how you are loading your stylesheets. It's similar to the "can't modify headers, they're already sent" in PHP, except HTML/CSS/webkit doesn't throw you an error.

I was experiencing this exact problem, read nienn's post, and I reviewed my head. Here were my contents previously.

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

Notice I'm not loading any JS, also note of how I was loading the style sheets page after specifying the title. After moving the stylesheet-references to the 'back', it worked like a charm. The end result looked like this:

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

It's not only javascript that can cause this problem, but the site title as well. I guess a good rule of thumb is css > js > site title.

小开

The accepted answer did not do the trick for me. There's a bug in Google Chrome that can be avoided just by adding a script in the page. Even an empty script solves the problem.

小开

There is a bug in Chrome that causes CSS transitions to fire if the page includes a <form> element.

One simple fix is to add a script tag containing a single space to the footer of the page.

<script> </script>

You can follow the bug at https://crbug.com/332189 and https://crbug.com/167083.

小开

The best way to solve this problem is to use the single space, empty <script> fix found in the answers on this page. However I've found 2 other ways to solve this problem.

  1. Place the CSS of the offending element(s) inside a <style> tag in the header of your HTML file. The bug only occurs when the CSS is called from an external stylesheet.
  2. Place the offending element(s) in a flexbox container. This fixes the bug as well.
小开

You can just add an empty script tag to your html file.

Like this:

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

but it should include at least one character. Either space or new line (\n) or comment (//) or whatever

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


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


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

Or just link a js file to your html file

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

You can place the script tag everywhere you want. In the head or body tag.

This problem only happen during development because at the final situation of a website it will definitely have a js file

小开

To fix CSS transition from firing on page load for me, the cause was Google Adsense script header, i.e.

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

The fix is to remove the async attribute

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

If you are wondering why it works, I don't know for sure.

I just think it's kinda funny how Google's script broke it's browser. It wasn't so funny trying to solve this for hours.


提交答案