停止CSS3从网页加载时启动的过渡 [英] Stop CSS3 transition from firing on page load
问题描述
我遇到了在网页加载时触发的CSS transition
属性的问题。
是当我对元素应用颜色
转换
(例如: transition:color .2s
)那么当页面第一次加载我的元素从黑色闪烁到它自己分配的颜色。
假设我有以下代码: / p>
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/xhtmldir =ltrlang =en>
< head>
< meta http-equiv =Content-Typecontent =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 =stylesheet/>
< / head>
< body>
< p class =green>闪动的文字< / p>
< / body>
< / html>
在网页加载时,我的 p.green
将从黑色
向绿色
淡出。
't想将颜色转换应用于:hover
伪类,因为不会应用转换 onMouseLeave 。
我真的很讨厌文本在网页上闪烁。到目前为止,我一直在避免使用转换,除非我真的需要它们,即使如此,我谨慎使用。
编辑1:
这发生在Google Chrome上。尚未在其他浏览器中测试...
编辑2:
我意识到,我不需要一个父元素分配的颜色触发闪烁的元素的颜色转换属性,所以我改写我的问题
jsfiddle.net/ShyZp/2 (感谢@Shmiddty)
@Shmiddty对这个问题的评论让我想起来,所以我一直在玩代码,并找到一个解决方案。
问题出在头
声明。通过反转 .CSS 和 .JS 外部文件调用的顺序,即先按 .CSS ,然后按 .JS - 颜色转换在网页加载时停止触发:
< head&
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< link href =css / main.css =stylesheet/>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js\"> ;</script>
< script src =js / main.js>< / script>
< / head>
我的猜测是 .JS
在DOM准备好后,将 .CSS
的负载延迟到。到那时(像@Shmiddty建议的)文本已经被分配默认浏览器颜色,然后使用我的 .CSS
转换
声明来淡入它的样式颜色。
**我仍然不确定这是最合适的方式,但它的工作原理。如果任何人有更好的解决方案,请随时添加或编辑。
I'm experiencing an issue with the CSS transition
property beeing fired on page load.
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.
Supposing I have the following code:
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>
On page load, my p.green
will fade from black
to green
.
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!
Edit 1: This happens on Google Chrome. Haven't tested in other browsers yet...
Edit 2: After some tests I realized that I don't need a parent element with assigned color to trigger the flashing on the element with the color transition property so I rephrased my question
jsfiddle.net/ShyZp/2 (thanks @Shmiddty)
@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 - ie, first the .CSS then 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 it's 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.
这篇关于停止CSS3从网页加载时启动的过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!