javascript - CSS 按位置或变换移动元素？

Question

显示我使用绝对位置或转换来移动 <div>页面周围？

我似乎记得读过使用位置移动物体的文章，例如:

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>

另请阅读 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left .