jQuery触发相变的铬闪光灯

Question

我试图淡出一个背景图像卷轴。

我使用jQuery .addClass()/.removeClass()触发事件，使用CSS3更改第二个背景的不透明度。

，我想坚持CSS3的动画，但有一个白色闪存时，动画是在铬上触发。

小提琴

，有什么办法可以防止这种闪光灯吗？

HTML：

<div class="second_bg"></div>

CSS：

body, html {
    height:150%;
    margin:0;
}
body {
    background: url("http://lorempixel.com/output/nature-q-g-640-480-9.jpg") repeat scroll 0 0;
}
.second_bg {
    opacity:0;
    height:100%;
    background:#566c75;
    -moz-transition: opacity 0.5s ease-in;
    -webkit- transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}
.fade-blue {
    opacity:1;
}

jQuery：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 20) {
            $(".second_bg").addClass("fade-blue");
        } else {
            $(".second_bg").removeClass("fade-blue");
        }
    });
});

Answer 1

要修复这个问题，可以在更新Fiddle (body)中添加：

-webkit-backface-visibility: hidden;

JSFiddle

相反，请使用此方法：

<div class="second_bg"></div>

保持html不变。

jquery：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 20) {
            $(".second_bg").fadeIn();
        } else {
            $(".second_bg").fadeOut();
        }
    });
});

将此css类更改为：

.second_bg {
    display:none;
    height:100%;
    background:#566c75;
}

与添加和移除类不同，它始终具有背景位置，只使用display:none;。

然后，您可以使用fadeIn和fadeOut来获得您想要的效果。

Answer 2

将-webkit-transform: translate3d(0,0,0);添加到body中，从而实现硬件加速似乎是可行的。

演示