Jquery 动画无法正确处理列表项

我有一个垂直的项目列表，每个项目都有一个删除按钮。当我点击其中一个的删除时，我希望下面的那些能够平滑地向上滑动，此时它们正在跳跃。

下面是代码：

http://codepen.io/ovesyan19/pen/chDgy http://codepen.io/ovesyan19/pen/chDgy

jQuery

$("#tasks_list").on('click', "a", function(){
    var _li = $(this).parent("li");
    _li.addClass("remove").stop().slideUp(300, function(){
        _li.remove();
    });
    return false;
});

CSS

#tasks_list li.remove{
    -webkit-animation: collapse_item 300ms ease;
    animation: collapse_item 300ms ease;
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

@keyframes collapse_item {
    0%      {-ms-transform: rotateX(0deg); transform: rotateX(0deg);}
    100%    {-ms-transform: rotateX(-90deg); transform: rotateX(-90deg);}
}

@-webkit-keyframes collapse_item {
    0%      {-webkit-transform: rotateX(0deg);}
    100%    {-webkit-transform: rotateX(-90deg);}
}

实际上我不确定你是否可以使用li因为这些元素实际上并没有动画，它们只是被重新利用，这意味着什么都没有margin , position or padding正在改变，但我认为如果你使用div你可以达到预期的效果，像shapeshift这样的插件也可以帮助你。

http://mcpants.github.io/jquery.shapeshift/ http://mcpants.github.io/jquery.shapeshift/

Edit:

这是我想到的一个快速解决方案，所以希望它有帮助。

Hint:

您可以在动画结束后删除该元素.remove()

http://fiddle.jshell.net/prollygeek/8zs3L/1/ http://fiddle.jshell.net/prollygeek/8zs3L/1/