Question

我正在开展一个项目，在这个项目中，我需要一个半透明的div，以便在某一点上整个页面。我目前有一个版本，但它并不像我想的那样顺利。

以上例子中的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);
});

你可以看到我得到了内部宽度和高度来设置＆＃34;失败屏幕＆＃34; div，因为它设置为100％并不能很好地运作。我正在使用jQuery为＆＃34;失败屏幕＆＃34;的最高位置设置动画。 DIV。

再次，我只想重构此代码并改进整体演示和性能。我愿意使用动画/物理库，如果有人知道在这里使用的那么好。

欣赏任何建议。

Answer 1

正如@Jason所提到的，我强烈建议使用CSS变换而不是摆弄偏移。这不仅是CSS转换卸载到GPU（在需要时由浏览器智能确定，但你也可以强制它），但它允许子像素渲染。保罗爱尔兰published a rather good write-up在2012年就此主题发表了这篇话题。

此外，您的代码在某些意义上是有问题的，因为它无法处理视口大小调整事件。事实上，一个更简单的解决方案就是使用position: fixed，然后使用CSS转换来在延迟后将元素放入视图中。

请在此处查看更新的小提琴：http://jsfiddle.net/teddyrised/27e310e8/2/

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

新的JS非常简单：我们设置#fail-screen的变换，以便将它移回原始的垂直位置。 jQuery 自动为transform属性添加前缀;）

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

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

CSS还可以处理转换延迟，持续时间甚至是计时功能，即transition: [property] [duration] [timing-function] [delay];因为在您的jQuery代码中，您将持续时间和延迟都设置为500毫秒，它应该是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;
}

垂直滑动整个页面

1 个答案: