CSS通过位置或变换来移动元素

CSS move element by position or by transform?

本文关键字：移动 元素 变换 位置 CSS      更新时间：2023-09-26

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

我似乎记得读到移动对象使用位置，如:

dialog.style.bottom = "100px";

比较慢，最好使用transform来移动对象:

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

然而，我也有一个CSS过渡的地方:

transition: 2s

有什么区别吗，变换仍然优先于位置还是它们现在都一样?

如果你想让它动画化，使用transform:

dialog.style.transform = "translateY(100px)";
#dialog {transform: translateY(50px); transition: all 2s;}
<div id="dialog">Hello</div>

另请阅读为什么使用Translate()移动元素优于Pos:abs Top/left

"更好",v1

关于"更好"在这种情况下意味着什么，我的第一个想法是哪个更适合在不同情况下使用。导致我想说的是:"不要混淆定位和设计运动。"

就是一个很好的例子。你有一个按钮。你想给它添加一个效果按钮，以便在它的活动状态下，它向下推2像素来模仿"被推"效应。这是一个应该做的设计动作翻译()。你可以用顶部或底部和相对定位，但是你混淆了定位的概念和design-y运动

假设你在应用的其他地方放置了一个按钮(完全合法的)。现在当top: 2px;应用于按钮在激活状态下，该按钮可能会缩小在你没有预料到的地方，可能使按钮无法点击。

使用translate()总是会将元素从当前位置"轻推"这个位置非常适合这样的效果，或者任何效果专门设计运动。Chris Coyier在A Tale of Animation表演

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

相关文章：