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（相对定位它而不需要额外的元素或求助于边距），以及transform是CSS3所以如果你可以使用而你应该position。

Answer 2

top和left CSS属性仅适用于定位relative，absolute或fixed的元素。此外，top和left属性依赖于父级的位置（相对于它，绝对或静态）。翻译不受该设置的影响。

当元素具有top时，翻译转换与应用left和position: relative“相同”。在任何其他情况下，它们都不是相同的操作。

Answer 3

渲染层的绘制顺序为：

布局层
绘画层
合成器层

重新绘制图层将触发后续图层的重新绘制。

更改left或margin将在动画元素的 layout层中触发重绘（反过来，将触发其他两层的重绘）。 >以及DOM中的后续元素。

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

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

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

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

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设置为child元素，容器将没有足够的空间容纳子元素，并且由于overflow被设置为scroll的事实，滚动条将礼物

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

最后，position参与了布局，而transform没有参与布局，这意味着transform可以具有更好的性能。

在布局不是您所关心的情况下，transform优先于position

CSS转换与位置

4 个答案: