是否可以通過CSS在滾動狀態之間進行狀態轉換而不閃爍？

Question

我試圖創建一個效果，其中頁面中某個區域內的列表中的div將變大，而不會在跨越轉換點（Chrome中的突出問題，也可能是其他瀏覽器）時閃爍。

Here's a jsfiddle of my current situation.

我已經差不多完成我需要什麼，這要歸功於偉大的jsfiddle貢獻這裏＃2 - 但是當我添加自己的規模效應，如果您滾動在過渡邊界太慢那種閃爍。這顯然是因爲縮放轉換（或正常的高度/寬度改變）一旦已經通過轉換點就導致回縮到邊界內，反之亦然。

有使這項工作有一個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

或者，你需要做「大」的狀態時，或者點擊區域較高，但會當元素靠近檢測區域的邊界時遭受同樣的問題。