如何动画元素移动到 DOM 中的另一个位置？答案

【问题标题】：How to animate elements moving to another spot in DOM?如何动画元素移动到 DOM 中的另一个位置？
【发布时间】：2014-03-16 17:35:16
【问题描述】：

使用 jquery、css3，我想将 div 标签移动到另一个位置，但不是立即，我想对其进行动画处理。

假设我有这个

<div>
    <div class='item' style='float:left;'>1</div>
    <div class='item' style='float:left;'>2</div>
    <div class='item' style='float:left;'>3</div>
</div>

我想将第一个 div 项（具有内部文本 1 的那个）移到底部，所以它看起来像这样

<div>
    <div class='item' style='float:left;'>2</div>
    <div class='item' style='float:left;'>3</div>
    <div class='item' style='float:left;'>1</div>
</div>

我该怎么做？

谢谢

【问题讨论】：

匿名投票者。难道你只是爱他们！如果您投反对票，请发表评论！
你试过什么？我不认为 SO 是您要求某些东西而人们为您编写代码的地方.. ~
我很乐意回答这个问题，如果问题不能在 30 秒内得到回答......那么每个人都很讨厌......
另外，有各种各样的动画，这个问题听起来太抽象了。我认为你应该更具体地描述所需的动画。

标签： javascript jquery html css jquery-animate

【解决方案1】：

当移动元素会导致元素重排时，您必须放置虚拟元素来保存源和目标的尺寸。在您的情况下，您可以克隆第一项，将克隆设置为visiblility: hidden，然后克隆克隆并将其附加到第三个元素之后。然后制作第一个项目position: absolute 并将其左侧和顶部值从第一个虚拟对象的位置动画到第二个虚拟对象的位置。动画完成后，附加动画元素，删除其内联样式，并删除假人。有关具有类似功能的真实库的示例，请参阅 jQuery Draggable/Droppable。

【讨论】：