我正尝试在我的应用程序中添加动画。这个显示了一个带有行的表格,每一行都可以修改/删除或移动。 这就是诀窍,我可以在表格的行之间移动元素,但我无法在此操作上放置动画(反转、交换)。 我根据我发现的关于该主题的帖子创建了一个 fiddle ,但这个是用 div 而不是表格。我已对其进行修改以符合我的情况。
=> 原来的 fiddle (作品): https://jsfiddle.net/2begw155/
<div ng-repeat="person in people" class="person">
{{person.first}} {{person.last}}
<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/
最佳答案
我不太确定你应该做什么,但如果你将你的 tr 转换成一个 block ,比如
.person {
transition: all 0.5s ease;
display:block;
}
这应该可行,但它不保留表格行的属性...也许您必须为 td 指定宽度。
希望对您有所帮助。
关于css - AngularJS 动画交换表中的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31557809/