AngularJS Animations Exchange rows in a table

Question

I am trying to add animation to my application. This table shows lines with lines, each line can be changed / deleted or moved. This is a trick, I can move elements between rows in my table, but I can not put animation (inversion, replacement) on this action. I created the fiddle based on the message I found about the subject, but this one was with divs, not a table. I changed it to fit my case.

=> Original fiddle (works): 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>

=> Changed with table (doesn't work):   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>

I want to keep table structure> tr> td and width / height due to UX design. If anyone has an idea, that would be great.

28/07: , Firefox! , pb webkit...

29/07: , Firefox, Chrome. , webkit, -webkit, . - , , . .person , , . = > new Fiddle https://jsfiddle.net/d81dd0tk/7/

Answer 1

, , tr ,

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

, table-row... , td.

, .