Question

当项目出现在表格中时，我正试图进入黄昏。可能有2个，3个或更多项同时出现。但是，ng-animate 不似乎无法正确处理此问题。

在下面的小提琴中，您可以看到表行的工作用例（旁边是带div元素的示例）。 div元素适当地动画。表格行元素没有。

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.次要超时（在我的测试中只有30ms）会导致后续行正常动画。但是，对于我的问题，这不是一个可行的解决方案。 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;
}

ng-animate多个表行不进行动画处理

1 个答案: