javascript - 当我使用过渡集更改 css 背景属性时，为什么我的背景会闪烁白色？

Question

我的背景有以下代码：

.contact {
    @include background(linear-gradient(#3e72ab, #39699d));
    color: #fff;
    display: none;
    height: 500px;

    transition: background 1s linear;
    -moz-transition: background 1s linear; /* FF 4 */
    -webkit-transition: background 1s linear; /* Safari & Chrome */
    -o-transition: background 1s linear; /* Opera */
    -webkit-backface-visibility: hidden;

以及以下 JavaScript 在单击提交按钮时更改背景：

    $(".contact input[type='submit']").click(function() {
        $(".contact").css({"background":"#2ea930"});
    });

但是当我单击提交按钮时，会出现白色闪烁。为什么会这样？它按预期闪烁白色然后变为绿色。我该如何阻止这个？

Answer 1

当 CSS 更改并重新加载时，会发生闪烁为白色。您看到的白色闪光是重写 CSS 所需的微秒内的转换。

我建议将您的过渡分层放在另一个背景之上。“白色闪光”实际上是 .contact 元素在瞬间完全透明。

伪代码：

.baseBackground {
     background: linear-gradient(#3e72ab, #39699d);
}

.contact {
    background: linear-gradient(#3e72ab, #39699d);
}

/* On change for .contact  */
.contact {
background-color: #2ea930;
}

<div class="baseBackground">
    <div class="contact"> This div changes </div>
</div>