我在页面加载时触发了CSS transition属性beeing的问题。

问题是,当我将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上。我没有在其他浏览器中进行过测试。

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

最佳答案

Chrome中有一个 bug ,如果页面包含<form>元素,则会触发CSS过渡。

一个简单的解决方法是将包含单个空格的脚本标签添加到页面的页脚。

<script> </script>

您可以在https://crbug.com/332189https://crbug.com/167083处关注该错误。

关于html - 停止在页面加载时触发CSS过渡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14389566/

10-12 04:01
查看更多