ng-animate 多个 table 行没有动画

Question

我正在尝试突出显示项目出现在 table 中的时间。可能同时出现 2、3 或更多项。但是，ng-animate 似乎无法正确处理此问题。

在下面的 fiddle 中，您可以看到 table 行的工作用例（以及具有 div 元素的示例）。 div 元素动画正确。 table 行元素没有。

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 元素显示为正确的动画。这是包含在 fiddle 中的一个比较点。
2.table行不能改成div个元素。
3. 轻微超时（在我的测试中只有 30 毫秒）会导致后续行正确设置动画。 但是，对于我的问题，这不是一个可行的解决方案。 4. 我只关心 ng-enter 动画。 5. 我尝试将动画样式应用到 table 行，但没有成功。

为什么会这样？更重要的是，我该怎么做才能使 table 中的所有新元素正确设置动画？

Answer 1

您的 table 的动画 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;
}

ng-animate 多个 table 行没有动画

ng-animate multiple table rows do not animate

javascript

angularjs

ng-animate