У меня есть следующий код для моего фона:
.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"});
});
Но когда я нажимаю кнопку отправки, появляется белая вспышка. Почему это вызвано? Он мигает белым, а затем зеленым, как предполагалось. Как это остановить?
Вспышка до белого происходит, когда 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>