AngularJS Animations Swap lines в таблице

Question

Я пытаюсь поместить анимацию в свое приложение. В этой таблице представлены строки с линиями, каждая строка может быть изменена/удалена или перемещена. Это трюк, я могу перемещать элементы между строками в моей таблице, но я не могу поместить анимацию (инверсию, замену) на это действие. Я создал скрипку на основе сообщения, которое я нашел о предмете, но этот был с divs, а не с таблицей. Я изменил его, чтобы соответствовать моему делу.

=> Оригинальный Fiddle (работы): https://jsfiddle.net/2begw155/

<div ng-repeat="person in people" class="person"> 
    {{person.first}} {{person.last}} &nbsp; 
    <button ng-click="personUp($index)">up</button> 
    <button ng-click="personDown($index)">down</button> 
    <button ng-click="personRemove($index)">remove</button> 
</div> 

=> Модифицированный один со столом (не работают): https://jsfiddle.net/d81dd0tk/6/

<table> 
    <tr ng-repeat="person in people" class="person"> 
     <td>{{person.first}} {{person.last}}</td> 
     <td><button ng-click="personUp($index)" ng-hide="$index === 0">up</button></td> 
     <td><button ng-click="personDown($index)" ng-hide="$index === people.length-1">down</button></td> 
     <td><button ng-click="personRemove($index)">remove</button></td> 
    </tr> 
</table> 

Я хочу, чтобы держать table> tr> td и без ширины/высоты из-за дизайна UX. Если у кого-то есть идея, это было бы здорово.

Редактировать 28/07: всегда стараемся, чтобы все работало, успешно протестировано на Firefox! Так что это pb переходов с webkit ...

Редактировать 29/07: создание новой скрипки, работающей на Firefox, без перехода на Chrome. Не уверен, что это проблема webkit, потому что другие переходы работают и с -webkit, что ничего не меняет. Я читал что-то о том, что хром применяет только переходы по свойствам, которые определены. В моем случае .person не имеет верхнего свойства, но даже если я устанавливаю это свойство, он вообще не работает. => новый Fiddle https://jsfiddle.net/d81dd0tk/7/

Answer 1

Я не совсем уверен, что вы должны сделать, но если вы превратить ваш тр в блоке, как

.person { 
    transition: all 0.5s ease; 
    display:block; 
} 

Это должно работать, но он не сохраняет свойство table- строка ... Возможно, вам нужно указать ширину для td.

Надеюсь, это поможет.