css样式表延迟适用[重复]答案

【问题标题】：The css stylesheet applies with delay [duplicate]css样式表延迟适用[重复]
【发布时间】：2021-01-27 05:15:24
【问题描述】：

我在一个项目中使用 Bootstrap 5.0 beta1 和我自己的 css 文件，并在我的 css 中为自定义登录按钮编写了这些选择器（顺便说一下，这是一个 <a> 元素）：

.login-button{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: 2s;
}

.login-button:hover{
    text-decoration: none;
    background-color: blue;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
}

但是当我打开网页时，奇怪的是，登录链接从无样式表单转换为它应该开始的原始表单：

我的网页中的其他一些元素也会出现延迟。例如，当我重新加载页面时，导航栏似乎根本没有样式，几分之一秒后，我在自定义 css 文件中编写的自定义 css 样式（和引导程序样式）适用于它们。

PS：当我使用内部 css（<style> 标签）应用样式时，它工作正常！

【问题讨论】：

我猜这是因为渲染阻塞。您的网站上还有哪些其他脚本？浏览器需要时间来渲染元素。对于这个特定的button，您可以轻松地将transition 仅应用于background-color，因为这是您在hover 上唯一更改的内容。在你有缓存机制之前，navbar 几乎没有什么关系。
删除过渡属性，这将修复它。
@NathanielFlick 为什么 OP 会删除过渡？然后链接不会在悬停时转换。
@disinfor 它与 Chrome 的渲染引擎有关，因为它在 Firefox 上都能正常工作
我敢打赌，如果您在 Firefox 中进行几次硬刷新，您可能可以让它复制您在 Chrome 中看到的内容。您确实有 brdtheo 的回答和我的其他评论中指出的修复方法。其他的东西肯定是渲染阻塞。

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

如果您尝试在 transition: 2s; 中指定属性会怎样

例如transition: backgound ease-in 2s;

【讨论】：

欢迎来到 Stack Overflow！这不应该被否决，因为它可以有效地解决页面加载按钮的主要问题。也就是说，还有更多内容。

【解决方案2】：

您的过渡，因为它不是特定的，会影响控件的所有方面。如果您希望它只应用于背景封面，在这种情况下，悬停，然后转换背景颜色并设置缓动：

.login-button{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: 2s ease-in-out background;
}

.login-button.no-transition{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: none;
}

.login-button:hover{
    text-decoration: none;
    background-color: blue;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>


<button class="login-button">Login</button>

<button class="login-button no-transition">Login</button>

【讨论】：

再说一次，他们为什么要删除transition？这就是他们想要的。
很公平@disinfor 我已经更新了我的答案。我错误地认为目标是完全消除效果。
如果是这样的话，那么我会赞成 brdtheo 的回答，因为它基本上就是你所拥有的，而且大约提前 4 小时。
@disinfor 嗯，好吗？
我这么说是因为你的答案正是 brdtheo 所指出的，例如仅将过渡应用于背景。您的回答显然回答了这个问题，但已经有一个回答了。就是这样。

【解决方案3】：

尝试在你的 body 标签中添加“preload”类：

<body class="preload">

并将其添加到您的 CSS 中：

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

然后添加这个jQuery：

$(window).load(function() {
  $("body").removeClass("preload");
});

这解决了我的问题 :) 参考 -> here.

【讨论】：

您的解决方案可能会解决问题，但仍然不能“解决”它。
这不是必需的，使用 !important 肯定会犹豫，因为它通常表明需要解决其他问题，而不是对全局级联进行适当的修复。