javascript - 垂直滑过整个页面

Question

我正在开发一个项目，我需要一个半透明的 div 在某个点滑过整个页面。我目前有一个可以运行的版本，但它并不像我希望的那么顺利。

http://jsfiddle.net/27e310e8/

上面示例中的 jQuery:

var windowWidth = $(window).innerWidth();
var windowHeight = $(window).innerHeight();

function blackOut() {
    $('#fail-screen').css({
        "width": windowWidth + "px",
            "height": windowHeight + "px"
    });

    $('#fail-screen').delay(1000).animate({
        top: '0px'
    }, 1000, 'linear');
}



$(document).ready(function () {
    blackOut(windowWidth, windowHeight);
});

如您所见，我正在获取内部宽度和高度来设置“失败屏幕”div，因为将其设置为 100% 效果不佳。我正在使用 jQuery 为“失败屏幕”div 的顶部位置设置动画。

再说一遍，我只是想重构这段代码并改进整体呈现和性能。如果有人知道任何可以在这里使用的动画/物理库，我愿意使用动画/物理库。

感谢任何建议。

Answer 1

正如 @Jason 所提到的，我强烈建议使用 CSS 转换，而不是摆弄偏移量。这不仅是将 CSS 转换卸载到 GPU(由浏览器在需要时智能确定，但​​您也可以强制执行)，而且还允许进行子像素渲染。保罗·爱尔兰 published a rather good write-up早在 2012 年就讨论过这个话题。

此外，您的代码存在一些问题，因为它无法处理视口(viewport)调整大小事件。事实上，更直接的解决方案就是使用 position:fixed，然后使用 CSS 转换，在延迟后将元素带入 View 。

在此处查看更新的 fiddle :http://jsfiddle.net/teddyrised/27e310e8/2/

对于 JS，我们只需使用 .css() 方法。延迟、动画时长甚至计时功能都可以通过CSS轻松完成。

新的 JS 相当简单:我们设置 #fail-screen 的变换，以便将其移回到原来的垂直位置。 jQuery 自动为 transform 属性添加前缀;)

$(document).ready(function () {
    $('#fail-screen').css({
        'transform': 'translateY(0)'
    });
});

对于 CSS，我们最初将垂直平移 (translateY) 设置为 -100%，这意味着我们将元素向上推其自身的高度。使用固定定位并将所有四个偏移量声明为 0，我们可以强制元素填充视口(viewport)，而无需通过 JS 监听窗口大小调整事件的任何高级技巧。请记住，您必须将 vendor 前缀添加到 transform 属性中，以最大限度地提高跨浏览器兼容性。

CSS 还可以处理转换延迟、持续时间甚至计时函数，即 transition: [property] [duration] [timing-function] [delay]; 因为在你的 jQuery 代码中你已经设置了持续时间和延迟均为 500ms，则应为 transition: all 0.5s Linear 0.5s。然而，线性计时函数看起来不太好——也许使用ease-in-out会更好，甚至是自定义的cubic-bezier curve ，也许？

此外，我建议将不透明度移至 background-color 值，因为如果您在元素本身上设置不透明度，所有子节点也将以 0.6 不透明度渲染...这可能是您不想实现的目标。

#fail-screen{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);  /* Moved opacity to background-color */
    position: fixed;                   /* Use fixed positioning */
    z-index: 303;

    /* Use CSS transform to move the element up by its own height */
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);

    /* CSS transition */
    transition: all .5s ease-in-out .5s;
}