在 chrome 的底部留出空间

Question

这是一种响应式设计，transform: translateY(2000px); 已应用于底部的块。动画在 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. 我认为您的搜索框设置了一个最小宽度，它在窄屏幕上超出了它的边框。

Answer 2

你可以试试下面的代码：

改变相对于静态的位置并检查它是否可以正常工作。

.sitewid {
    margin: 0 auto;
    position: static;
    width: 960px;
}

祝你好运……