Javascript ng设置多个表行的动画不设置动画

当项目出现在表中时，我试图点亮。可能有2个、3个或更多项目同时出现。但是，

ng animate

似乎不能正确处理此问题

在下面的fiddle中，您可以看到表行的工作用例（以及一个带有div元素的示例）。div元素将正确设置动画。表行元素不存在

HTML

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

注：
1.

div

元素显示为正确的动画。为了便于比较，小提琴中包含了这一点。
2.无法将表行更改为div元素。
3.一个较小的超时（在我的测试中只有30毫秒）会导致后续行正确地设置动画然而，对于我的问题，这不是一个可行的解决方案。 4.我只关心

ng enter

动画。 5.我尝试将动画样式应用于表行，但没有成功

---

为什么会发生这种情况？更重要的是，如何使表中的所有新元素正确地设置动画？

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

---

这是你的电话号码。我也在chrome上运行它。对我来说，它看起来是正确的，但可能是以另一种我不理解的方式失败了。在这篇文章中，我还更新了背景色css动画，使其仅应用于tr元素，看起来是一样的，尽管div版本较慢，尤其是在remove.Great上。我已经将其缩减到相关的位-如果您在回答中更新代码以包含正确/缩减的css，我将接受。看到这把小提琴的“减少”css:Edited-感谢对我的反馈，我是相当新的堆栈溢出！上面示例中的小提琴似乎是“固定”版本。是否可以链接到非固定的？（看起来以/6结尾的url是“坏的”版本）@ryanm-上面的版本显示了错误的行为。单击“添加项目”可添加三个项目：正确设置第一个项目的动画，而不是第二个项目，并设置第三个项目的动画（第三个项目有一点超时）。固定版本是我现在看到的，谢谢澄清。

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;
}