css - AngularJS 动画交换表中的行

Question

我正尝试在我的应用程序中添加动画。这个显示了一个带有行的表格，每一行都可以修改/删除或移动。这就是诀窍，我可以在表格的行之间移动元素，但我无法在此操作上放置动画(反转、交换)。我根据我发现的关于该主题的帖子创建了一个 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>

由于用户体验设计，我想保留一个表>tr>td 结构并且没有宽度/高度。如果有人有想法，那就太好了。

编辑 28/07:一直在努力让它工作，在 Firefox 上成功测试!所以这是 webkit 的 pb 转换...

编辑 29/07:创建新的 Fiddle，适用于 Firefox，在 Chrome 上没有转换。不确定这是一个 webkit 问题，因为其他转换有效并且 -webkit 不会改变任何东西。我读了一些关于 chrome 只对定义的属性应用过渡的内容。在我的例子中，.person 没有顶级属性，但即使我设置了这个属性，它也根本不起作用。=> 新 fiddle https://jsfiddle.net/d81dd0tk/7/

Answer 1

我不太确定你应该做什么，但如果你将你的 tr 转换成一个 block ，比如

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

这应该可行，但它不保留表格行的属性...也许您必须为 td 指定宽度。

希望对您有所帮助。