极客观点
项目管理
HarmonyOS
我遇到了 CSS transition 属性蜂鸣在页面加载时触发的问题。
问题是，当我将 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 。
让文本在网页上闪烁真的很烦人。到目前为止，除非我真的需要它们，否则我一直避免使用过渡，即使如此我也小心使用。如果有一些我没有看到的非常明显的解决方案，那就太好了！
这发生在谷歌浏览器上。我没有在其他浏览器中测试过。
jsfiddle.net/ShyZp/2 （感谢@Shmiddty）
原文由 nienn 发布，翻译遵循 CC BY-SA 4.0 许可协议
@Shmiddty 对这个问题的评论让我开始思考，所以我一直在研究代码并找到了解决方案。
问题在于
header声明。通过反转 CSS 和 JS 外部文件调用的顺序——即将 CSS 放在 JS 之前——颜色转换在页面加载时停止触发：我的猜测是 JS 加载将 CSS 的加载延迟到 DOM 准备好之后。到那时（正如@Shmiddty 所建议的那样）文本已经被分配了默认的浏览器颜色，然后使用我的 CSS
transition声明淡入其样式颜色。\*\* 我仍然不确定这是最合适的方法，但它确实有效。如果有人有更好的解决方案，请随时添加或编辑。