动画化DOM元素的删除和附加

Question

我希望为我的用户提供互动体验。并且我希望保持响应速度。 我尝试通过制作纸牌游戏来学习网络。

我所要单击的东西应该显示在页面的其他位置。 （到目前为止，我正在使用jQuery）

（简化的）用例是：

var card = $('[card=X]').remove();
$('.board').append(card);

现在，我想向其中添加一些动画。

我没有选择合适的框架。 在我尝试的操作中，我无法安排移除的时间，或者当我尝试在回调中调用移除时，动画消失了。 这太可怕了，因为删除操作是在回调之前触发的，还是根本没有触发。 否则就没有任何东西可以重新附加了。因此，它应该不仅仅是“模糊”或“淡入淡出”。

因此，我想用动画来分离事物，将其放置在其他位置，并通过动画使其“出现”。 作为极好的奖励，这些动画将具有方向性，以便最终用户可以看到“从”和“到”的位置。 （就像在这两个位置之间绘制的箭头或线条。）

（抱歉，没有更具体，但是针对所有框架/库询问该问题似乎并不那么吸引人。）

---

编辑：尼克指出我在正确的方向。 我的问题是样板代码。 我调整了他提供的代码。 （在动画中添加了淡入淡出功能+使用事件处理程序使事情“重新出现”了。）因此我将他的回答标记为正确。 （即使不是，他也没有附加原始内容，而是创建了一个新内容。）

 $('.cards ').on('click', '[card-id]', function() { $(this).fadeOut(1000, function() { var old = $(this).remove(); $('.cards').append(old); old.fadeIn(); }); 

Answer 1

考虑从Jquery使用.animate（）。 您可以做很多事情。

看一下API： http ： //api.jquery.com/animate/

Answer 2

 for(var i = 0; i < 6; i++) { $('.cards').append('<div class="card" card-id="'+i+'"></div>'); } $('[card-id]').click(function() { $(this).fadeOut(2000, function() { $(this).remove(); $('.cards').append('<div class="card" card-id="'+$(this).attr('card-id')+'"></div>'); }); }); 

 .card { position: relative; display: inline-block; width: 120px; height: 180px; background-color: #F4F4F4; border: 1px solid #E8E8E8; border-radius:5px; margin: 15px; cursor: pointer; } .card:after { content: attr(card-id); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700; font-family: courier, serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cards"></div>