ng-animate 多个表行不动画

Question

当项目出现在表格中时，我试图突出显示。可能有 2、3 或更多项目同时出现。但是，ng-animate 似乎没有正确处理此问题。

在下面的小提琴中，您可以看到表格行的工作用例（以及带有 div 元素的示例）。 div 元素动画正确。表格行元素没有。

Demo Fiddle

HTML

<table class="animate-appear">
  <tr ng-repeat="item in repeatingItems">
    <td>{{item}}</td>
    <td>{{item}}</td>
  </tr>
</table>

CSS（简体）

table.animate-appear tr td {
  padding: 5px 10px;
  transition: all 1s ease;
  opacity: 1;
}

table.animate-appear .ng-enter td,
table.animate-appear .ng-leave.ng-leave-active td,
table.animate-appear .ng-move td {
  opacity: 0;
  background-color: yellow;
}

table.animate-appear .ng-enter.ng-enter-active td,
table.animate-appear .ng-leave td,
table.animate-appear .ng-move.ng-move-active td {
  opacity: 1;
  background-color: white;
}

注意事项：
1. div 元素的动画效果似乎正确。这包含在小提琴中以进行比较。
2.表格行不能改为div元素。
3. 轻微的超时（在我的测试中只有 30 毫秒）会导致后续行正确动画。 这不是解决我的问题的可行解决方案。 4. 我只关心ng-enter 动画。 5. 我尝试将动画样式应用于表格行，但没有成功。

为什么会这样？更重要的是，我能做些什么来使表格中的所有新元素都能正确设置动画？

Answer 1

表格的动画 css 导致冲突，因为它同时应用于行和单元格。如果您更改 css 以使动画仅适用于该行，则它应该正确动画。

table.animate-appear tr {
  transition: all 1s ease;
  opacity: 1;
}

table.animate-appear td {
  padding: 5px 10px;
  opacity: 1;
}

table.animate-appear .ng-enter,
table.animate-appear .ng-move {
  opacity: 0;
  background-color: yellow;
}

table.animate-appear .ng-enter.ng-enter-active,
table.animate-appear .ng-leave,
table.animate-appear .ng-move.ng-move-active {
  opacity: 1;
  background-color: white;
}