Почему мой фон мигает белым при изменении свойства фона css с помощью набора переходов?

Question

Почему мой фон мигает белым при изменении свойства фона css с помощью набора переходов?

0

У меня есть следующий код для моего фона:

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

Но когда я нажимаю кнопку отправки, появляется белая вспышка. Почему это вызвано? Он мигает белым, а затем зеленым, как предполагалось. Как это остановить?

Doug Smith 20 сен. 2013, в 23:47

Источник

Теги:

javascript

jquery

css

css3

css-transitions

1 ответ

Ещё вопросы

jpostdesign · Answer 1 · 2014-01-10T17-01-00.000Z

Вспышка до белого происходит, когда 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>