停止CSS3从网页加载时启动的过渡

前端之家收集整理的这篇文章主要介绍了停止CSS3从网页加载时启动的过渡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到一个问题的CSS转换属性beeing在页面加载。

问题是,当我应用颜色转换到元素(例如:transition:color .2s),那么当页面首次加载我的元素从黑色闪烁到它自己分配的颜色。

假设我有以下代码

CSS

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

@H_404_8@<!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将从黑色渐变为绿色。

我不想应用颜色转换到:hover伪类,因为不会应用转换onMouseLeave。

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

编辑1:
这发生在Google Chrome上。尚未在其他浏览器中测试…

编辑2:
经过一些测试后,我意识到,我不需要一个父元素与指定的颜色触发闪烁的元素与颜色过渡属性,所以我重申了我的问题

jsfiddle.net/ShyZp/2(感谢@Shmiddty)

解决方法

@Shmiddty对这个问题的评论让我想起来,所以我一直在玩代码,并找到了一个解决方案。

问题在于头声明。通过反转.CSS和.JS外部文件调用的顺序 – 即首先是.CSS,然后是.JS – 颜色转换在页面加载时停止触发:

@H_404_8@<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转换声明来淡入它的样式化的颜色。

**我仍然不确定这是最合适的方法,但它的工作原理。如果任何人有更好的解决方案,请随时添加或编辑。

原文链接:https://www.f2er.com/css/220097.html

猜你在找的CSS相关文章