是否可以在滚动状态之间不闪烁的情况下进行 CSS 缩放转换？

Question

我正在尝试创建一种效果，使页面特定区域内的列表中的 div 变大，而不会在越过过渡点时闪烁（Chrome 中的突出问题，也许其他浏览器也是如此）。

Here's a jsfiddle of my current situation.

感谢 jsfiddle 在 Stackoverflow 上的出色贡献，我已经基本完成了我的工作 - 但是当我添加自己的缩放效果时，如果您在过渡边框上滚动太慢，它会有点闪烁。这显然是因为缩放转换（或正常的高度/宽度变化）一旦通过转换点就会导致边框内部收缩，反之亦然。

有没有一种方法可以使用 CSS 方法来完成这项工作，或者我是否需要更改脚本 - 在这种情况下（因为我不太熟悉这种数学方程式) 怎么样？

$(document).ready(function () {
    $(window).on('scroll', function () {
        var windowHeight = $(window).height(),
            gridTop = windowHeight * .3,
            gridBottom = windowHeight * .6;
        $('ul li').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();

            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
               // $(this).css('background', 'red');
                                    $(this).addClass('in_zone');
                            } else {
                //$(this).css('background', 'silver');
                                    $(this).removeClass('in_zone');
            }
        });
    });
    $(window).trigger('scroll');
}); 

Answer 1

问题是由于您检查的元素底部在区域底部之外。当元素被放大时，下次scroll 触发时，它将恢复到较小的状态，因为元素的底部在该区域之外。然后下一次滚动它将再次变大，因为较小的元素现在完全在该区域内，依此类推。

要解决此问题，您只需要在该区域内的元素顶部进行检查，如下所示：

if (thisTop > gridTop && thisTop < gridBottom) {
    $(this).addClass('in_zone');
} else {
    $(this).removeClass('in_zone');
}

// Note that you can also re-write this logic with a single call to `toggleClass()`:
$(this).toggleClass('in_zone', thisTop > gridTop && thisTop < gridBottom);

您还需要确保 CSS 缩放原点位于元素的顶部，以便 top 位置是静态值。您可以使用transform-origin（它是供应商前缀等价物）来做到这一点：

transform-origin: 50% 0%;

Working example

或者，您需要使“大”状态更小，或者命中区域更高，但是当元素靠近检测区域的边界时，也会遇到同样的问题。