停止在页面加载时触发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>
我的猜测是，在DOM准备就绪后，JS的加载将CSS的加载延迟了.到那时(如@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屋！
