CSS转换与位置

Question

有些人可以向我解释转换位置left或right属性的差异,或者-transform: translateX(n),因为两者似乎达到相同的目的,但可以独立应用.我理解硬件加速的可能性,但这取决于实现.

// psuedo code;

#box {
    -transition-property: all;
    -transition-duration: 1s;
}

// javascript

box.style.transform = "translateX(200px)";
vs
box.style.left = "200px";

一个优于另一个的优势是什么？谢谢,

p

Answer 1

位置取决于position设置的内容,transform从元素本身开始.所以你可以看到transform它是完全相同的position:relative;.

但是,你仍然可以使用transform一个绝对定位的元素(相对定位而不需要额外的元素或求助于边距),以及transformCSS3所以如果你可以使用它,position你应该使用.

Answer 2

top和leftCSS属性仅适用于定位的元素relative,absolute或fixed.此外,top和left性能依赖于父母的位置(相对的,绝对的或静态).翻译不受该设置的影响.

翻译转换与应用top和left元素何时"相同" position: relative.在任何其他情况下,它们不是相同的操作.

Answer 3

渲染层的绘制顺序为：

• 布局层
• 油漆层
• 复合层

图层中的重绘将触发后续图层中的重绘。

更改left或margin将触发布局元素中的重绘（继而将触发其他两层中的重绘），以用于动画元素和DOM中的后续元素。

更改transform将仅针对动画元素触发在合成器层中 的重绘（DOM中的后续元素将不会重绘）。

性能上的差异（因此，以每秒帧数为单位，或者简单地说，是动画平滑度）是指数级的。即使在良好的机器上（处理器繁忙时），使用第一种技术通常也会导致抖动动画，而即使在资源有限的系统上，第二种技术也可能会平稳运行。

使用transforms的另一个优点是对合成器重绘进行了优化（对多个元素进行动画处理会导致全部重绘一次），而更改布局层会在每个元素进行每次更改后触发重绘。

有关渲染技术和渲染性能的更详细说明，我建议使用Google的Web基础知识。

Answer 4

如上所述： position:relative并且translate可以以不同的方式达到相同的效果

position:relative发生在布局阶段，这意味着它可以在布局方面与其他元素进行交互

translate当所有布局过程完成时发生，甚至已经绘制，剩下的就是把元素放在哪里，所以它与现有布局没有交互

考虑以下示例，该示例将通过使用两种方法呈现明显的视觉差异

    .container {
        width: 300px;
        height: 300px;
        overflow: scroll;
        background: red;
    }

    .child {
        width: 280px;
        height: 280px;
        background: green;
    }
    <div class="container">
        <div class="child"></div>
    </div>

通过设置position:relative;top:100px为子元素，容器没有足够的空间来容纳子元素，并且因为overflow设置为scroll，滚动条会出现

另一方面，通过设置transform:translateY(100px)，它与布局无关，因此不会出现滚动条

就像规范说的那样：

但是，如果相对定位导致 'overflow:auto' 或 'overflow:scroll' 框溢出，则 UA 必须允许用户访问此内容（在其偏移位置），这可能会通过创建滚动条而影响布局

总而言之，position涉及布局，transform而不涉及，这意味着transform可以有更好的性能。

喜欢transform到position当布局是不是你的关心