Question

这是一个响应式设计， 转换：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制作动画。翻译不会影响页面布局，并且性能更好，但这是您问题的一部分，对吧？

另一方面，我发现了一些问题：

你的javascript在这里表现会很糟糕。每次用户向上或向下滚动时，即使完成所有动画，也可以运行此功能来检查位置。我相信你可以很多重构它。
您还必须考虑禁用javascript的用户。目前页面上没有任何内容。
我认为你的搜索框上设置了一个最小宽度，它在狭窄的屏幕上显示出它的边框。

Answer 2

您可以尝试以下代码：

相对于静态更改位置，检查可能会正常工作。

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

祝你好运....

在chrome的底部留下空间

2 个答案: