CSS硬件加速的宽度是多少？(CSS hardware accelerated width?)

2019-08-18 01:53发布

站内文章 / 前沿技术
36 0 0

我试图建立一个PhoneGap的应用程序，将允许用户通过移动中间分隔来改变一个两个栏布局的大小。

我能得到这个工作，但有一个巨大的问题UX：它是laggy。 这并不可怕，但在最新的iPad，它甚至显着的，里面有我的担心。

这里是我的JS，做大小调整： 

$("div").on("touchmove", "#columnResizeIcon", function(e) {
    e.preventDefault();
    var left = e.originalEvent.touches[0].pageX;
    var right = $("#columnContainer").width() - left;

    $("#leftColumn").css({
       "width":left - 1 + "px",
       "right":"auto",
    });
    $("#rightColumn").css({
       "width":right - 1 + "px",
       "left":"auto",
    });
    $("#columnResize").css({
       "-webkit-transform":"translate3d(" + left  + "px" + ", 0, 0)",
       "left":"auto",
    });
    $("#columnResizeIcon").css({
       "-webkit-transform":"translate3d(" + left  + "px" + ", 0, 0)",
       "left":"auto",
    });
});

你会发现，我趁translate3d()来更改元素的“左”的值，因为这是硬件加速。 我相信滞后被更改左，右列，这正是我需要硬件加速的宽度产生。

我觉得可能工作的一种可能的解决方案是使用-webkit-transform:translate3d(50%, 0, 0)以超过半数的页面推右列，然后只是改变该值，希望它只会拉长，直到它达到了母公司。 它继续，然而，进入该页面的50％，母公司的不是50％。

我的HTML标记看起来是这样的： 

<div id="columnContainer">
    <div id="columnResize"></div>
    <div id="columnResizeIcon"></div>

    <div id="leftColumn">
        <div class="header">Left Header</div>
        <div class="content"></div>

    </div>
    <div id="rightColumn">
        <div class="header">Right Header</div>
        <div class="content"></div>
    </div>
</div>

而我的CSS： 

body{
    background-color:#000;
}

#columnContainer{
    position: absolute;
    bottom:0;
    top:0;
    right:0;
    left:0;
    background-color:#000;
}

#leftColumn{
    position: absolute;
    top:0;
    left:0;
    right:50%;
    bottom:0;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    margin-right: 1px;
}

#rightColumn{
    position: absolute;
    top:0;
    left:50%;
    right:0;
    bottom:0;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    margin-left: 1px;
}

.header{
    position: absolute;
    left:0;
    right:0;
    height:33px;
    z-index: 5;
    background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%);
    box-shadow:  inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 17px;
    font-family: Helvetica;
    font-weight: bold;
    letter-spacing: .2px;
    text-align: center;
    padding-top:9px;
    color:#71787F;
    text-shadow: 0 1px 0 #E3E5E9;
}

.content{
    position: absolute;
    left:0;
    right: 0;
    top:42px;
    bottom: 0;
}

#leftColumn .content{
    background-color:#F5F5F5;
}

#rightColumn .content{
    background-color:#fff;
}

#columnResize{
    position: absolute;
    width:2px;
    top:0;
    bottom: 0;
    left:50%;
    margin-left:-1px;
    background-color:#000;
    z-index: 2;
}

#columnResizeIcon{
    position: absolute;
    z-index: 3;
    width:10px;
    height:30px;
    top:50%;
    bottom:50%;
    margin-top:-15px;
    left:50%;
    margin-left:-7px;
    border-left:2px solid #000;
    border-right:2px solid #000;
}

Answer 1:

我终于想通了，工作比我好很多的解决方案。 基本上，我动画的容器，和我隐藏，当我调整的内容。 然后，当大小调整完成后，我再次显示的内容。 我用了一个动画制作隐藏/显示，当它看起来很漂亮。 该代码将更好地解释它比我将：

全能小提琴

1 http://jsfiddle.net/charlescarver/hnQHH/134/

我的解释

当滑块被轻触时，它推动所有的文本元素在页面用translate3d()变换，然后隐藏在div。 这是因为滞后返回，如果我尝试更新宽度虽然示出的元素。 所以，一旦的div是隐藏的，我然后只向左或向右移动与列translate3d()再一次改造。 我能做到这一点，而不必每个元素的宽度停止短，因为我设置的left或right值永远不能达到，所以它延伸足够远超出页面的值。 这样一来，我可以简单而无需担心它会过早地切断接班。

怪事

这方面有这可能是多余的部分，但我会尽快清理这些了。 您还可能会注意到一些奇怪的事情正在进行，如（1） cornerLeft ，（2） dummy ，（3） shadow ，而在JS，（4） minimum ：

  1. 当我调整页面大小，该dummy导航栏扩展了左，右列，这意味着它会宽度的1000％的整个宽度。 这意味着，我不能设置一个border-radius的资产净值为每个列的左侧和右侧，因为这将是很遥远的屏幕，这将是不可见的。 所以，我做了一个简单的角落掩盖窗口的两侧，使得它看起来很漂亮。

  2. 我躲在.contentLeft和.contentRight当我调整，因为它会导致滞后时，它的显示。 我不希望得到摆脱，虽然导航栏，所以我做一个dummy一个是永远存在的网页上，而当调整大小是即将发生的根本揭示。 我想，这减少了，因为我没有添加元素，因为它总是在那里的滞后。

  3. 有一个问题，然而，就是在正常的导航覆盖虚拟资产净值中， box-shadow的重叠，使其成为200ms的变暗。 我不喜欢这样。 于是，我把一个阴影，始终是在导航的顶部，无论什么导航是显示的。

  4. 我现在可以轻松地设置了界限，可拖动列可以停止之前到达。 方便吧？

码

HTML： 

<div id="container">
    <div class="cornerLeft"></div>
    <div class="cornerRight"></div>
    <div class="shadow"></div>
    <div class="left">
        <div class="contentLeft">
            <div class="header"></div>
            <div class="headerbehind"></div>
            <div class="text textLeft">Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus.</div>
        </div>
        <div class="dummy"></div>
        <div class="dummybg"></div>
    </div>
    <div class="divider"></div>
    <div class="right">
        <div class="contentRight">
            <div class="header"></div>
            <div class="headerbehind"></div>
            <div class="text textRight">Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus.</div>
        </div>
        <div class="dummy"></div>
        <div class="dummybg"></div>
    </div>
</div>

CSS： 

* {
    -webkit-text-size-adjust:none;
}
#container {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-color:#000;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
}
.left {
    -webkit-transform:translate3d(0, 0, 0);
    position:absolute;
    left:-3000px;
    right:50%;
    top:0;
    bottom:0;
    border-right:1px solid #000;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.right {
    -webkit-transform:translate3d(0, 0, 0);
    position:absolute;
    left:50%;
    right:-3000px;
    top:0;
    bottom:0;
    border-left:1px solid #000;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.divider {
    width:24px;
    height:40px;
    border-left:2px solid #000;
    border-right:2px solid #000;
    position:absolute;
    left:50%;
    z-index:3;
    margin-left:-14px;
    margin-top:-20px;
    top:50%;
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
.contentLeft {
    position:absolute;
    right:0;
    bottom:0;
    top:0;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.contentRight {
    position:absolute;
    left:0;
    bottom:0;
    top:0;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.cornerLeft:after {
    content:"";
    height:5px;
    position:absolute;
    left:0;
    width:5px;
    background: -webkit-linear-gradient(top, #F0F2F4 0%, #EAEBEE 100%);
    z-index:700;
    border-top-left-radius:5px;
    box-shadow:inset 0 1px 0 #fff;
}
.cornerLeft {
    position:absolute;
    z-index:700;
    left:0;
    width:5px;
    height:5px;
    background-color:#000;
}
.cornerRight:after {
    content:"";
    height:5px;
    position:absolute;
    right:0;
    width:5px;
    background: -webkit-linear-gradient(top, #F0F2F4 0%, #EAEBEE 100%);
    z-index:700;
    border-top-right-radius:5px;
    box-shadow:inset 0 1px 0 #fff;
}
.cornerRight {
    position:absolute;
    z-index:700;
    right:0;
    width:5px;
    height:5px;
    background-color:#000;
}
.header, .dummy {
    position: absolute;
    left:0;
    right:0;
    height:35px;
    background: -webkit-linear-gradient(top, #f4f5f7 0%, #a7abb7 100%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 17px;
    font-family: Helvetica;
    font-weight: bold;
    letter-spacing: .2px;
    text-align: center;
    padding-top:9px;
    color:#71787F;
    text-shadow: 0 1px 0 #E3E5E9;
    word-break: break-all;
    box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090;
}
.shadow {
    height:44px;
    position:absolute;
    left:0;
    right:0;
    box-shadow:0 1px 2px rgba(0, 0, 0, .2);
    z-index:600;
}
.header {
    z-index:500;
}
.dummy {
    z-index:100;
}
.headerbehind {
    position:absolute;
    background-color:#000;
    left:0;
    right:0;
    height:44px;
    z-index:499;
}
.text, .dummybg {
    margin-top:44px;
    background-color:#fff;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
}
.text {
    z-index:2;
    padding:20px 40px;
    -webkit-animation-duration:200ms;
    -webkit-animation-timing-function:ease;
}
.contentLeft, .contentRight {
    z-index:300;
}
.leftOut {
    -webkit-transform:translate3d(-100%, 0, 0);
    -webkit-animation-name:leftOut;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.leftIn {
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-animation-name:leftIn;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes leftOut {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(-100%, 0, 0);
    }
}
@-webkit-keyframes leftIn {
    0% {
        -webkit-transform:translate3d(-100%, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(0, 0, 0);
    }
}
.rightOut {
    -webkit-transform:translate3d(100%, 0, 0);
    -webkit-animation-name:rightOut;
}
.rightIn {
    -webkit-transform:translate3d(0, 0, 0);
    -webkit-animation-name:rightIn;
}
@-webkit-keyframes rightOut {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(100%, 0, 0);
    }
}
@-webkit-keyframes rightIn {
    0% {
        -webkit-transform:translate3d(100%, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(0, 0, 0);
    }
}

JS： 

minimum = 100;
$(".contentLeft").css("width", ($("#container").width() / 2) - 1);
$(".contentRight").css("width", ($("#container").width() / 2) - 1);

$("div").on("touchstart", ".divider", function (e) {
    $(".textLeft").removeClass("leftIn");
    $(".textLeft").addClass("leftOut");
    $(".textRight").removeClass("rightIn");
    $(".textRight").addClass("rightOut");
    setTimeout(function () {
        $(".contentLeft, .contentRight").hide();
    }, 200);
});

$("div").on("touchmove", ".divider", function (e) {
    e.preventDefault();
    if ($(".contentLeft").css("display", "none")) {
        var page = $("#container").width();
        var left = e.originalEvent.touches[0].pageX;
        var right = page - left;
        updateWidth(page, left, right);
    }
});

//$(".contentLeft, .contentRight").hide();

$("div").on("touchend", ".divider", function (e) {
    setTimeout(function () {
        $(".textLeft").removeClass("leftOut");
        $(".textLeft").addClass("leftIn");
        $(".textRight").removeClass("rightOut");
        $(".textRight").addClass("rightIn");
        $(".contentLeft, .contentRight").show();
    }, 200);
});

$(window).on('orientationchange', function (e) {
    var page = $("#container").width();
    var leftWidth = $(".contentLeft").width();
    var rightWidth = $(".contentRight").width();
    var previousWidth = (leftWidth + rightWidth);
    if (leftWidth + rightWidth + 2 < page) {
        var left = (page / 2) - (previousWidth / 2) + leftWidth;
    } else if (leftWidth + rightWidth + 2 > page) {
        var left = leftWidth - ((previousWidth / 2) - (page / 2));
    }
    var right = page - left;
    updateWidth(page, left, right);
});

function updateWidth(page, left, right) {
    if (left < minimum) {
        var finalLeft = minimum;
        var finalRight = (-1 * (page - minimum));
        var finalRightWidth = (page - minimum);
    } else if (right < minimum) {
        var finalLeft = (page - minimum);
        var finalRight = (-1 * minimum);
        var finalRightWidth = minimum;
    } else {
        var finalLeft = (left);
        var finalRight = (0 - right);
        var finalRightWidth = (right);
    }
    $(".divider").css({
        "-webkit-transform": "translate3d(" + finalLeft + "px, 0, 0)",
            "left": "auto",
    });
    $(".left").css({
        "-webkit-transform": "translate3d(" + finalLeft + "px, 0, 0)",
            "right": "100%",
    });
    $(".right").css({
        "-webkit-transform": "translate3d(" + finalRight + "px, 0, 0)",
            "left": "100%",
    });
    $(".contentLeft").css("width", finalLeft);
    $(".contentRight").css("width", finalRightWidth);
}

1 是的，我花了134次尝试。



Answer 2:

我不得不推两个元素融入问题在硬件加速堆了一些成绩： 

#leftColumn,
#rightColumn {
  -webkit-transform: translate3d(0,0,0);
}

似乎更为顺利调整。 这并不是说改变width本身进行优化，而不是元素本身的重新渲染快得多。

我成立了一个普拉克这里： http://plnkr.co/edit/5RMtCl1Sql8f3CmQLHFz



文章来源: CSS hardware accelerated width?
标签： javascript jquery css css3 hardware-acceleration
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~