javascript - 注入(inject) css 而无需从用户样式表转换

Question

我已经使用 webpack 构建了一个构建，其中我的所有 css 作为内联 css 注入(inject)到头部，并在加载主 javascript 文件后创建。

我在页面加载时发生了很多转换，我相信这是因为用户代理样式表。

假设我有一个背景颜色为黑色的按钮，默认情况下背景颜色从白色开始，当我有以下颜色时动画变为黑色:

button {
    transition: all 0.4s ease;
    background-color:black;
}

有没有办法阻止浏览器从默认样式表转换？

Answer 1

如果你在正文中添加一个类名，例如 .no-transition 会怎么样。

在您的文档 css 中包含类似这样的内容:body.no-transition * { transition:none !important; }

这有望覆盖所有即将加载到页面中的转换。

在你的 css 插入到 head 之后，使用 javascript 或 jquery 从 body 标签中删除 .no-transition 类。