javascript - 动画移除和附加 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

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>