Question

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

我似乎记得读过使用以下位置移动物体：

dialog.style.bottom = "100px";

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

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。

Answer 2

“更好”，v1

我首先想到的是“更好”在这种情况下意味着哪一个   更适合在不同情况下使用。这导致   我要说：“不要把定位与设计动作混为一谈。”

例证。你有一个按钮。您想要对其应用效果   按钮，以便在它的：活动状态下，它向下移动2个像素来模仿   一种“推动”的效果。这是一个应该完成的设计动作   翻译（）。你可以用顶部或底部和亲戚来做   定位，但那时你会混淆定位的概念   和设计运动。

让我们说在应用程序的其他地方你绝对定位一个按钮   （完全合法）。现在当那个顶部：2px;应用于按钮   在它的：活动状态，该按钮可能会缩小   在某个你没想到的地方，可能会让按钮无法点击。

使用translate（）将始终从其当前“轻推”元素   对于像这样的效果，或者真的任何效果都很完美的位置   特定于设计的动作。Chris Coyier A Tale of Animation Performance

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

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

2 个答案: