如何防止 Chrome 中页面加载时触发 CSS 转换？

在页面加载时抑制 CSS 过渡启动

在某些情况下，CSS 过渡可能会在页面加载期间无意中激活，导致元素闪烁。在元素上应用颜色过渡时可能会出现此问题。

根据提供的示例：

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

页面加载时，

中的文本将显示为

<script> </script>

元素从黑色（初始颜色）过渡到绿色。这种行为是不需要的，并且可能会造成视觉破坏。

为了防止这种意外的转换，解决方案涉及利用 Chrome 行为的独特方面。当页面包含

时元素，Chrome 过早触发 CSS 转换。通过在脚本标签中添加单空格字符，可以模拟该元素的存在，从而抑制错误的转换：这个简单的解决方法通过提供空白 解决了 Chrome 中的错误。表格>元素，防止在页面加载期间不必要地启动转换。

以上是如何防止 Chrome 中页面加载时触发 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！