jquery - 在 chrome 底部留下空间

Question

这是一个响应式设计，transform: translateY(2000px); 已应用于底部的 block 。动画在 Chrome 中运行良好，但动画似乎在页面底部留下了一个空白区域。这只发生在 Chrome 中。

元素链接:

http://50.87.144.37/~projtest/team/design/Call/

CSS:

.come-in {
  transform: translateY(2000px);
  -webkit-transform: translateY(2000px);
  animation: come-in 0.8s ease forwards;
  -webkit-animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
  -webkit-animation-duration: 0.6s; 
}

JS:

 (function($) {

      $.fn.visible = function(partial) {

      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

      };

    })(jQuery);

    $(window).scroll(function(d){

       $(".unWcalls").each(function(i, el) {
       var el = $(el);
    if (el.visible(true)) {
       el.addClass("come-in"); 
    } 
  });
});

Answer 1

问题是您使用 translateY(2000px) 将元素向下推，然后使用 translate(0px) 将它们直接向上拉。因此，如果有意义，Chrome 会在底部为它们留出一个位置。这jsFiddle说明了问题。 (我没有理会所有的供应商前缀)。

相反，默认将它们向下翻译并在滚动时向上拉动它们，like so .

如果它仍然存在问题，请设置动画 margin-top或 top on absolute position .翻译对页面布局的影响不大，而且性能更好，但这是您的问题的一部分，对吧？

换句话说，我发现了一些问题:

1. 你的 javascript 在这里的性能会很糟糕。每次用户向上或向下滚动时，甚至在所有动画完成后，您都运行此函数来检查位置。我相信您可以对其进行大量重构。
2. 您还必须考虑禁用 javascript 的用户。当前页面上没有显示任何内容。
3. 我认为您的搜索框设置了最小宽度，在窄屏幕上它会超出其边界。