我可以使用 CSS 过渡为绝对定位元素设置动画吗？

Posted 2023-03-06

【中文标题】我可以使用 CSS 过渡为绝对定位元素设置动画吗？

【英文标题】：Can I animate absolute positioned element with CSS transition?

【发布时间】：2014-09-18 08:06:45

【问题描述】：

我想用 CSS 转换为元素的位置变化设置动画，但即使我在 all 属性上使用转换也无法正常工作，如下例所示：http://jsfiddle.net/yFy5n/3/

但是，我不希望我的最终解决方案将过渡应用于所有属性，而是仅应用于位置更改。所以颜色变化应该是即时的，只有从左到右的位置变化应该是动画的（与现在发生的相反）。

【问题讨论】：

由于没有人提到它：left 属性默认为auto。如果起点或终点之一是该值，则转换将永远不会起作用。两者都必须定义。下面答案中的边距解决方案有效的原因是因为边距的所有四个边都默认为0，所以它已经设置了定义的值。

@animuson 是的。有人清除了所有的 cmets，但你可以看到 here 原来的 OPs 版本在早期版本的 Chrome 上运行，很奇怪。

【参考方案1】：

您忘记为left 定义默认值，所以它不知道如何制作动画。

.test 
    left: 0;
    transition:left 1s linear;

请看这里：http://jsfiddle.net/shomz/yFy5n/5/

【讨论】：

为了更好的兼容性，你可以使用 JS $('#test').animate('left': 60 );

@Shomz：谢谢伙计。不知道它是如何为我工作的（？！）。我使用的是带有 Windows 的 Chrome v24

谢谢（我希望它假定默认左，所以我从来没想过自己定义它）；但是，我应该做些什么改变才能只获得过渡的位置，而不是颜色？

@Harry 是的，有趣的事情。我在 Chrome v36 上。刚刚尝试了 Chromium，什么也没有。听起来他们处理初始值的方式不同。

@ImNotMike 不客气。要缩小范围，只需设置 left 而不是 all：jsfiddle.net/shomz/yFy5n/14

【参考方案2】：

试试这个：

.test 
    position:absolute;
    background:blue;
    width:200px;
    height:200px;
    top:40px;
    transition:left 1s linear;
    left: 0;

【讨论】：

你能详细解释一下为什么“这个”会起作用吗？这将使这个答案对将来遇到类似但不完全相同的问题的其他人有用。

【参考方案3】：

请试试这个代码margin-left:60px 而不是left:60px

请看：http://jsfiddle.net/hbirjand/2LtBh/2/

正如@Shomz 所说，转换必须更改为transition:margin 1s linear; 而不是transition:all 1s linear;

【讨论】：

不知道为什么有人反对这个。它很好地避免了left 错误。 +1 来自我。顺便提一句。由于 OP 只想要位置偏移，转换可以修改为 margin: jsfiddle.net/shomz/2LtBh/1