Question

我对我的横幅元素进行了转换，在滚动时稍微调整了图像的大小，see here

转换代码如下：

  $(window).scroll(function(){
    var x = $(this).scrollTop(),
        transY = (x * 0.5), scale = 1 + (x * 0.0003),
        transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';
    $('#myCarousel .carousel-inner').css({
      opacity: 1 - (x * 0.0008),
      WebkitTransform: transform,
      MozTransform: transform,
      msTransform: transform,
      transform: transform
    });
  });

我的问题是，虽然动画在firefox中运行得非常流畅，但我在chrome中获得了闪烁/可见的调整大小效果。

我是否应该在css中更改它以使其在chrome中顺利运行，或者此浏览器是否无法进行简单的转换？

Answer 1

您可以尝试使用setTimeout进行基本测试：

$(window).scroll(function(){
    var x = $(this).scrollTop(),
        transY = (x * 0.5), scale = 1 + (x * 0.0003),
        transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';


    setTimeout(function(){

        $('#myCarousel .carousel-inner').css({
          opacity: 1 - (x * 0.0008),
          WebkitTransform: transform,
          MozTransform: transform,
          msTransform: transform,
          transform: transform
        });

    }, 3);


}); // - EOF - $(window).scroll(function()

Answer 2

我会更喜欢这样做：

var x, transY, transform, scale, c = $('#myCarousel .carousel-inner');
$(window)
    .scroll(function() {
        x = $(this)
            .scrollTop();
        transY = (x * 0.5);
        scale = 1 + (x * 0.0003);
        transform = 'translateY(' + transY + 'px) scale(' + scale + ') translate3d(0,0,0)';
    });
requestAnimationFrame(function anim() {
    c.css({
        opacity: 1 - (x * 0.0008),
        WebkitTransform: transform,
        MozTransform: transform,
        msTransform: transform,
        transform: transform
    });
    requestAnimationFrame(anim);
});

但我从来没有看到你在谈论铬的闪烁。

转型在铬中闪烁

2 个答案: