AngularJS Animations Поменять местами строки в таблице

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

=> Оригинальный 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! Итак, это пб переходов с webkit...

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


css angularjs html-table ng-animate
person WebEtAlors.fr    schedule 22.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person LekimR    schedule 22.07.2015