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>

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

1 个答案: