AngularJS动画在表格中交换行

Posted 2023-03-06

【中文标题】AngularJS动画在表格中交换行

【英文标题】：AngularJS Animations Swap lines in table

【发布时间】：2015-10-12 00:20:34

【问题描述】：

我正在尝试在我的应用中添加动画。这是一个带有行的表格，每一行都可以修改/删除或移动。 这是诀窍，我可以在表格中的行之间移动项目，但我无法在此动作上放置动画（反转，交换）。 我根据我发现的关于该主题的帖子创建了一个 Fiddle，但这个是 div 而不是 table。我已经修改它以匹配我的情况。

=> 原始小提琴（作品）： 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 结构并且由于 UX 设计没有宽度/高度。如果有人有想法，那就太好了。

28/07 编辑：一直在努力使其工作，在 Firefox 上成功测试！所以这是一个 pb 的 webkit 转换...

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

【参考方案1】：

我不太确定你应该怎么做，但是如果你把你的 tr 转换成一个像

这样的块

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

这应该可以，但它不保留 table-row 的属性...也许您必须为 td 指定宽度。

希望这能有所帮助。