停止在页面加载时触发CSS过渡
我transition在页面加载时触发了CSS 属性beeing 的问题。
问题是，当我将a 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;
}
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。
我不想将颜色转换应用于:hover伪类，因为那样不会将转换 应用于onMouseLeave 。
我真的很讨厌在网页上闪烁文本。到目前为止，除非我确实需要过渡，否则我一直在避免使用过渡，即使如此，我也要谨慎使用。如果有一些我看不到的真正明显的解决方案，那就太好了！
这发生在Google Chrome上。我尚未在其他浏览器中进行过测试。
问题答案：
@Shmiddty对这个问题的评论让我开始思考，因此我一直在研究代码并找到了解决方案。
问题出在header声明上。通过反转CSS和JS外部文件调用的顺序（即，将CSS放在JS之前），颜色转换将在页面加载时停止触发：
<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声明淡入其样式颜色。
**我仍然不确定这是否是最合适的方法，但是它可以工作。如果有人有更好的解决方案，请随时添加或编辑。
-
问题内容： 当页面使用AJAX时可以使用隐式和显式等待，但是我想停止由于加载足够的元素而导致的加载。因为调用仅在页面加载完成后才返回，所以可以这样做吗？ 问题答案： 是的，可以通过将功能设置为来实现。然后等待一个元素出现并调用以停止加载：
-
当页面使用AJAX时，可以使用隐式和显式等待，但是当加载了足够的元素时，我希望停止由引起的加载。是否可以这样做，因为调用仅在页面加载完成时才返回。
-
问题内容： 我正在寻找一种在页面加载时自动“单击”项目的方法。 我尝试使用 但这似乎行不通吗？但是，当我进入Firebug的控制台并运行脚本时，它可以工作。 可以在加载时使用触发事件吗？ 问题答案： 您尝试触发的点击处理程序很可能也通过附加了。可能发生的情况是您在附加处理程序之前触发了事件。解决方法是使用： 10ms的延迟将导致该函数在所有处理程序被调用后立即运行。
-
问题内容： 当我运行以下脚本时，该事件总是在页面加载时触发。我不确定在这里做错了什么，我创建了元素，在DOM中找到它，然后附加了一个侦听器，但是它总是在页面加载时触发事件，而不是在单击元素时触发事件。 问题答案： el.addEventListener(“click”, alert(“clicktrack”), false); 执行此行后，将调用并返回。要传递警报代码，您需要将其包装在一个函数中。
-
我有一个非常基本的mvc应用程序。 我有两个css文件，即site.css和bootstrap.min.css。 我看到在应用程序中，正在加载bootstrap.min.css中提到的样式，它具有如下样式 html，正文{边距：0；填充：0；} 等等。 在调试代码时，我了解到这两个css文件都存在于_layout.cshtml中 link href=“@url.content（”~/content
-
我创建了2个动态页面，第一个是个人资料页面，第二个是城市页面。这两个页面基本上都是由来自URL的数据的查询提供的。。 我的计划是将和这两个页面的URL重写为和，这样查询就会得到解析，然后显示在一个好看的URL上。 访问者单击链接（不存在的页面） .htaccess重写服务器中的URL并将请求的页转换为 查询返回并显示在上 文件结构： 根 根/CSS 根/包括 奇怪的是，我一打开上的