スクロール時の状態間のちらつきを起こさずにCSSスケールをトランジションすることはできますか？

Question

私は、ページの特定の領域内のリスト内のdivが、移行ポイントを越えてちらつくことなく大きくなるようにしようとしています（Chromeの目立つ問題、おそらく他のブラウザかもしれません）。

Here's a jsfiddle of my current situation.

私はかなり、私は必要なものStackOverflowの上ここに偉大なjsfiddle貢献に感謝を達成しました - しかし、私は私自身のスケールの効果を追加するときは、トランジションの境界線の上にあまりにも遅いスクロールする場合、それは一種の点滅。これは明らかに、スケール遷移（または通常の高さ/幅の変更）は、境界線が既に遷移点を通過した後で縮小を引き起こし、逆も同様です。

この方法を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: 50% 0%; 

Working example

または代わりに、あなたは背の高い「大」状態が小さい、あるいはヒット領域にする必要があるだろうが、それは希望：あなたは（と、それはベンダープレフィックス同等です）transform-originを使用していることを行うことができます要素が検出領域の境界付近にある場合にも同じ問題が発生します。