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

Question

我应该使用绝对定位或变换来移动页面上的 <div> 元素？

我记得阅读过使用 position 属性来移动元素的文章，例如：

dialog.style.bottom = "100px";

直接移动物体的速度较慢，最好使用transform来移动物体：

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

然而，由于我还设置了CSS过渡效果：

transition: 2s

这是否有所不同，是转换仍然优于位置还是它们现在都一样？

- NickC

---

转换 vs 定位 - Ashok kumar

实际问题似乎在各种回复中有些混淆了。关键在于一个过渡动画的位置是否与变换有所不同？我理解直接位置和变换之间的区别，但是对于带有过渡动画的位置又如何呢？ - NickC

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更好。

- Praveen Kumar Purushothaman

---

是的，但为什么呢？本应该解释一下，不管怎样，这是链接：https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ - Jonas Grumann

Answer 2

"更好", v1

我在这个上下文中对"更好"的第一个想法是，在不同情况下哪个更适合使用。这导致我说：“不要混淆定位和设计动画。”

举个例子，你有一个按钮。你想对该按钮应用效果，使其在 :active 状态下向下挤压2像素，以模拟“按下”效果。这是一种设计动画，应该使用 translate() 来完成。你可以使用 top 或 bottom 和相对定位来实现，但这会混淆定位和设计动画的概念。

假设在应用程序的其他地方，你绝对定位了一个按钮（完全合法）。现在当 top: 2px; 应用于该按钮的 :active 状态时，该按钮可能会飞到你意想不到的地方，可能使按钮无法点击。

使用 translate() 将始终“推动”元素从其当前位置开始，这非常适合这种效果，或者任何特定于设计的动作。 "Chris Coyier" 在 "A Tale of Animation Performance" 中。

请阅读这篇文章，它会为您提供关于该主题的所有信息。 https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

- Hameed Gamal

---

我感觉这似乎是一个意见问题，对于基本问题没有确定的答案。 - NickC