仅使用 CSS 即可在位置之间制作动画

Question

我想在div 的"默认"状态/位置之间制作动画。例如：

Div 绝对定位与一个类，在屏幕的左侧。类通过JS删除（或替换），位置现在是相对的。默认的相对位置实际上在屏幕的另一侧。我想制作动画。

类似于停靠栏

的东西，各种div 作为内联显示的图标，水平居中在停靠栏上。如果我"删除"其中一个图标，其余的图标将稍微移动以重新居中。我想让它们移动以填补空白。

过渡：一切都不起作用（我假设是因为该职位没有预定义的值），所以这甚至可能吗？有JS解决方案吗？

Answer 1

完全

按照你描述的方式。这是一个如何完成的实时示例。

http://jsfiddle.net/nDr4y/3/

您还可以从 css 中删除过渡，并使用 jquery 使用纯 JS 对元素进行动画处理。语法如下所示：

// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);

Answer 2

你只需要找出目标坐标并使用jQuery或任何你使用的框架来设置它。除此之外，这是完全可能的。

http://jsfiddle.net/Kd72u/