停止在页面加载时触发CSS过渡

一尘不染

停止在页面加载时触发CSS过渡

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上。我尚未在其他浏览器中进行过测试。

阅读 663

2020-05-16

共1个答案

一尘不染

@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声明淡入其样式颜色。

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

2020-05-16