Bootstrap Table TR 上的动画不工作

Question

我有一个 bootstrap table 实际上我想删除一行。但是如果我这样做，简单地删除它看起来并不顺利所以我想......嘿只要使用动画 .hide():

$('.myTR').hide('slow', function(){
    $(this).remove();
});

这实际上有相同的结果。该行慢慢隐藏，下一行刚刚弹出。

接下来尝试为行的高度设置动画：

$('.myTR').animate({
   height: "0px"
}, 1500 );

不起作用...实际上它会起作用...但前提是我把它变大...

有技巧吗？

Here is my fiddle

在此 fiddle 中，您必须单击该行以将其展开，然后您才能看到另一个 table 中带有 glyphicon-trash 图标的行。点击图标将高度变为0px。

编辑：

More try's fiddle

这里我试着给该行一个 display 属性...我有反应，但它看起来仍然很奇怪 ^^

Answer 1

一种可能是有效地删除该行，但同时在Y方向上变换它下面的行，使它们不移动。

你需要事先知道行高

如果在动画中设置此转换，则在您考虑的时间后将其设置为 0

fiddle

$('.glyphicon-trash').on('click', function(){
    $(".test").removeClass('test');
    $(this).closest("tr").nextAll().addClass('test');
    $(this).closest("tr").remove();
});

.test {
    -webkit-animation: move 1s;
    animation: move 1s;
}

@-webkit-keyframes move {
    0% {transform: translateY(23px);}
  100% {transform: translateY(0px);}
}

@keyframes move {
    0% {transform: translateY(23px);}
  100% {transform: translateY(0px);}
}

请注意，要使其第二次起作用，应在动画发生后的超时时间内删除测试 class。我在 fiddle 中使用的方法无法可靠地工作

Answer 2

我花了一些时间，但现在我知道怎么做了。

这是所有正在寻找这个的人的解决方案...

（诀窍是动画所有包含 td 的）

$('.myTR').children('td').animate({
    'font-size': 0,   //needed
    opacity:0,        //optional but looks smoother
    height:0,         //needed
    padding:0         //needed
},function(){
    $('.myTR').remove();
});

在我的脚本中，我在 TD 中有一个图标。如果我点击它，我希望 table 行能够顺利隐藏。所以我得到上面的 tr 就像 .closest('tr')。但是简单地设置 tr 高度的动画是行不通的，因为 tr 中的一些元素带有一些 css 设置。例如font-size 或 padding.

所以要解决这个问题，需要选择tr中的所有td(.children('td'))。比 .animate() 按预期工作。请参阅上面的示例或 this FIDDLE

Bootstrap Table TR 上的动画不工作

Bootstrap Table animation on TR doesnt work

css

jquery

twitter-bootstrap-3