CSS按位置还是按变换移动元素？

Question

显示我使用绝对位置或变换<div>在页面上移动 a吗？

我似乎记得使用位置阅读移动物体，例如：

dialog.style.bottom = "100px";

速度较慢，最好使用变换来移动对象：

dialog.style.transform = "translateY(100px);

但是，因为我也有一个 CSS 过渡：

transition: 2s

这有什么区别吗，转换仍然优先于位置还是现在它们都相同？

Answer 1

如果您想要动画，请使用transform以下命令移动它：

dialog.style.transform = "translateY(100px)";

#dialog {transform: translateY(50px); transition: all 2s;}

<div id="dialog">Hello</div>

另请阅读为什么使用 Translate() 移动元素比 Pos:abs Top/left 更好。