Анимация Bootstrap Table на TR не работает

Question

У меня есть загрузочный стол, и на самом деле я хочу удалить строку. Но если я сделаю это, он не выглядит гладкой, чтобы просто удалить его, так что я думал, что ... эй просто использовать анимированные .hide():

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

это на самом деле имеет один и тот же результат. Строка медленно скрывается, и следующая нижняя строка просто появляется.

Следующая попытка была анимировать Hight из ряда:

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

не работает ... На самом деле это работает ... но только если я его больше ...

Есть Обмануть это?

Here is my fiddle

В этой скрипке вы должны нажать на строку, чтобы развернуть его и чем вы можете увидеть строки в другой таблице со значком glyphicon-трэш. Нажатие на значок превратит высоту в 0px.

Edit:

More try's fiddle

здесь я попытался дать строка а атрибут display ... и у меня есть реакция, но она по-прежнему выглядит причудливо ^^

Answer 1

Мне потребовалось некоторое время, но теперь я знаю, как сделать трюк.

Вот решение для всех, кто ищет для этого ...

(Уловка анимировать все содержащий ТД)

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

В моем сценарии у меня есть значок в TD. Если я нажму на него, я хочу, чтобы таблица-строка была гладкой. Поэтому я получаю выше tr, как .closest('tr'). Но просто анимировать высоту tr не работает, так как есть некоторые элементы в tr с некоторыми настройками css. например font-size или padding.

Чтобы решить эту проблему, необходимо выбрать все td в tr (.children('td')). Чем работает .animate(), как и раньше.См. Пример выше или this FIDDLE

Answer 2

Один вешать это эффективно удалите строку, но в то же время преобразуйте строки под ней в направлении Y, чтобы они не перемещались.

Вы должны знать высоту строки перед рукой

Если это преобразование устанавливается внутри анимации, то вы установите его в 0 afert время, которое вы считаете

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);} 
} 

Обратите внимание, что для этого, чтобы работать второй раз, тестовый класс должен быть удален в таймаут после анимации. Метод, который я использовал в скрипке, не будет работать надежно