Question

我在页面加载时应用CSS时出现问题。它有点像 F 抨击 O f U nstyled C 内容，但所有元素没有应用transition: all .4s ease样式显示按预期方式。在没有缓存的情况下加载页面时，似乎在该元素上设置默认样式之前应用了转换。

例如：

的index.html

<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <a href="#link" class="foo">Link</a>
</body>
</html>

的style.css

body {
    font: 14px/1.231 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.foo {
    transition: all .4s ease;
    color: #333;
    font-size: 18px;
}

在这种情况下，我通常会在页面加载时看到灰色的18px链接。但是某些方式正在加载页面或样式会导致链接以蓝色14px链接开始，然后动画显示应用foo类，灰色和18px的样式。

导致此行为的原因是什么，我该如何解决？

Answer 1

你必须从你的风格主体中删除字体大小，并根据你的dom元素大小调整字体大小。

如果您在字体上调整字体大小，则第一个css规则将应用于每个元素，并在浏览器呈现下一个规则后依此类推。

在页面加载时应用默认样式时触发CSS转换

1 个答案: