Chrome flash的过渡触发的jQuery

我正在尝试在滚动中淡入/淡出背景图像。

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

我想坚持CSS3的动画，但有一个白色闪光当动画被触发的chrome。

小提琴

是否有办法防止这种闪光?

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

下面的几个技巧可以帮助防止闪烁—只需将它们应用于<body>元素:

-webkit-backface-visibility: hidden; 参见demo
-webkit-transform: translate3d(0,0,0) 参见演示

它对我来说没有问题，但由于某种原因，当我在你的小提琴中测试它们时，属性似乎在iframe内滚动时会出现问题—因此，在将此修复用于生产版本时应该谨慎，或者至少先对它们进行测试。

p/s:在本地机器上测试，为我工作

更新小提琴为了解决这个问题，你可以在css (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来获得你想要的效果。

将-webkit-transform: translate3d(0,0,0);添加到body，这使硬件加速似乎有效。

相关内容

最新更新

热门标签：