Question

我正在建立一个网站，我在其中放置了一个滚动动画，其中图标图像根据右侧容器内容的偏移位置向上移动。逻辑很有效，但动画片和Firefox中的动画不稳定。

代码逻辑就像这样：

$(window).scroll(function() {    
    var height = $(window).height(),
        scroll = $(window).scrollTop()
        var offsetStart = $('#cardContent').offset();      
    if (initialOffSetStartPosition.top >= (offsetStart.top -scroll - 1) ) {
        $(".nav-sticky").offset({top:offsetStart.top});     
}
});

任何帮助？

Answer 1

尝试使用transform代替定位。 https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

它具有更好的性能，可能会给您更顺畅的效果。此外，如果您使用的是视网膜显示器或其他高密度显示器，它也会影响性能。

更新：是的，我刚刚在Safari和Firefox的5K显示器上尝试过，性能很差。但是，当我把它移到标准显示器上时，性能很好。我仍然说使用transform来定位动画质量的元素。

Answer 2

不要为触发布局重新计算的属性设置动画。简而言之，请使用transform而不是top left之类的道具等。检查here以查看每个属性的工作原理。一般来说，transform和opacity是唯一可以廉价制作动画的属性，其余属性取决于确切的布局复杂性。
除非您正在缩放移动的元素，否则可以使用will-change: transform对其进行预优化。它是一个complicated主题，但总的来说，它至少可以帮助设置translateZ(0)之类的空白初始变换。
滚动绑定passive。

在Safari和FireFox中向上滚动时的乱七八糟的动画

2 个答案: