knockout.js - 为什么这个带有 jQ​​uery 调整大小动画的淘汰赛 foreach 绑定不可靠？

Question

通过随机点击 A 将 16 张牌添加到您的“手牌”中。然后，通过单击要从手上删除的手牌来随机删除牌。全部删除。随意删除。跟踪您的点击次数。每隔几个回合，只需不到 16次点击即可从您的手牌中移除所有牌 - 时不时地，只需单击一下即可移除 2 张牌。

http://jsfiddle.net/7z7kP/4/

我的代码中是否存在我忽略的错误？

self.afterAdd = function(element) {         
    var el = $(element);            
    el.addClass( el.text() );
    el.click( function(event) {
        el.animate({width: 0, height: 0}, 222, function() {
            self.hand.splice(el.index(),1);
        });
    });
};

Answer 1

当 2 张牌消失时，我可以安全地重现：双击任何 A，你会得到两张牌（如预期的那样）。但它们似乎共享相同的点击处理程序，因此两者都是动画的，但只有一个从您的手中移除（observableArray）。

动画被删除后，这种行为没有再次发生，所以我认为发生了一些令人讨厌的事情。

self.afterAdd = function(element){         
    var el = $(element);            
    el.addClass( el.text() );
    el.click( function(event) {
        var idx = el.index();
        self.hand.splice(idx,1);
    });
};

我想为隐藏动画（通过一个简单的）提供一个基于 CSS3 的不错的解决方案el.addClass("hide");，但这并没有达到预期的效果。两张牌再次消失，但随后又出现了一张。-.-

.hide {
  -webkit-animation: hidecard 1s;
}

@-webkit-keyframes hidecard {
    0% { height: 0; width: 0; opacity: 1; }
    100% { height: 0; width: 0; opacity: 0; display:none; }
}