1

私の背景には次のコードがあります。

.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"});
    });

しかし、送信ボタンをクリックすると、白いフラッシュが発生します。これはなぜ起こるのでしょうか？意図したとおり、白く点滅してから緑に点滅します。どうすればこれを止めることができますか?

4

1 に答える 1

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>
于 2014-01-10T19:01:32.880 に答える