阻止 CSS 转换在页面加载时触发 [英] Stop CSS transition from firing on page load
问题描述
我遇到了在页面加载时触发的 CSS transition 属性的问题.
I'm experiencing an issue with the CSS transition property beeing fired on page load.
问题是，当我将 color transition 应用于元素时，(例如:transition: color .2s)然后当页面首先加载我的元素从黑色闪烁到它自己指定的颜色.
The problem is that when I apply a color transition to an element, (ex: transition: color .2s) then when the page first loads my elements flashes from black to it's own assigned color.
假设我有以下代码:
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.
On page load, my p.green will fade from black to green.
我不想将颜色过渡应用到 :hover 伪类，因为它不会应用过渡 onMouseLeave.
I don't want to apply the color transition to the :hover pseudo class as that would not apply the transition onMouseLeave.
让文本在网页上闪烁真的很烦人.到目前为止，我一直在避免使用过渡，除非我真的需要它们，即使如此我也要小心使用.如果有一些我没有看到的非常明显的解决方案，那就太好了！
I'ts really annoying having the text flashing across the webpage. Up to this moment I have been avoiding using transitions unless I really need them and even so I use with care. It would be great if there is some really obvious solution to this that I'm not seeing!
这发生在 Google Chrome 上.我没有在其他浏览器中测试过.
This happens on Google Chrome. I haven't tested in other browsers.
jsfiddle.net/ShyZp/2 (感谢@Shmiddty)
推荐答案
@Shmiddty 对这个问题的评论让我思考，所以我一直在玩代码并找到解决方案.
@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.
问题在于 header 声明.通过反转 CSS 和 JS 外部文件调用的顺序——即将 CSS 放在 JS 之前——颜色转换在页面加载时停止触发:
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>
我的猜测是 JS 加载将 CSS 的加载延迟到 DOM 准备好之后.到那个时候(正如@Shmiddty 建议的那样)文本已经被分配了默认的浏览器颜色，然后使用我的 CSS transition 声明淡入其样式颜色.
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.
这篇关于阻止 CSS 转换在页面加载时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
