css - animate - AngularJS Animations Intercambia líneas en la tabla

ng hide angular 6

Question

Estoy tratando de poner animación en mi aplicación. Este presenta una tabla con líneas, cada línea puede ser modificada / eliminada o movida. Este es el truco, puedo mover elementos entre líneas en mi tabla, pero no puedo poner animación (inversión, intercambio) en esta acción. Creé un violín basado en una publicación que encontré sobre el tema, pero esta fue con divs y no con tabla. Lo he modificado para que coincida con mi caso.

=> El violín original (funciona): 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>

=> El modificado con tabla (no funciona): 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>

Quiero mantener una estructura table> tr> td y sin ancho / alto debido al diseño de UX. Si alguien tiene una idea, sería genial.

Edit 28/07 : ¡siempre tratando de hacerlo funcionar, probado con éxito en Firefox! Entonces este es un pb de transiciones con webkit ...

Editar 29/07 : crear nuevo Fiddle, funciona en Firefox, sin transición en Chrome. No estoy seguro de que sea un problema de webkit porque otras transiciones funcionan y con -webkit que no cambia nada. Leí algo acerca de que Chrome solo aplica transiciones en propiedades que están definidas. En mi caso, .person no tiene una propiedad superior, pero incluso si configuro esta propiedad, no funciona en absoluto. => nuevo Fiddle https://jsfiddle.net/d81dd0tk/7/

Answer 1

No estoy muy seguro de lo que debes hacer, pero si transformas tu tr en un bloque como

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

Esto debería funcionar pero no mantiene la propiedad de la fila de la tabla ... Tal vez tenga que especificar un ancho para el td.

Espero que esto pueda ayudar.