在同一元素上使用 ngInclude 时，ngRepeat 的动画不起作用答案

【问题标题】：ngRepeat's animations don't work when using ngInclude on the same element在同一元素上使用 ngInclude 时，ngRepeat 的动画不起作用
【发布时间】：2013-12-10 04:31:26
【问题描述】：

测试用例：http://plnkr.co/edit/dsG3gxFomAK8Q15Xfouj?p=preview

上面的测试用例是使用ng-repeat 指令两次呈现的数据列表。一次不使用ng-include，一次使用ng-include。

为ng-repeat 指令支持的所有三个动画（enter、leave 和 move）设置了 CSS 过渡。当 not 使用 ng-include 时，所有三个动画都可以正常工作，但只有 enter 动画在使用 ng-include 加载列表中每个项目的模板时工作。

我很确定这是angular-animate 的错误，但不确定。使用 ng-repeat 和 ng-include 组合时，我可能做错了什么。我尝试挖掘angular-animate 源代码并解决问题，但不能。我所想的（希望是真的）是ng-include 指令在ng-repeat 呈现的每个项目上方添加了一个注释节点，并且该节点正在摆脱angular-animate 的工作。这也是两个实现之间唯一明显的区别。

还请注意，当没有设置动画时，所有功能都可以正常工作。但是在使用ng-include 的示例中，不仅动画（用于向上或向下移动项目）搞砸了，而且项目甚至都没有移动。

这是一个错误吗？如果是这样，是否有已知的解决方法？我尝试在 github 上搜索 angular.js 的问题，但找不到解决方法（我发现的那些不起作用）。感谢您对此提供的任何帮助。

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat ng-animate angularjs-ng-include

【解决方案1】：

但使用 ng-include 加载列表中每个项目的模板时，只有 enter 动画有效。

实际上，我在 Chrome 中的行为不一致。有时移动动画会起作用。

如果有，是否有已知的解决方法？

您可以嵌套 ng-repeat-ed / ng-include-ed 元素，因此指令位于不同的元素上，因此不应该有任何冲突，无论是什么原因。 http://plnkr.co/edit/dVniIVUaGS8y7wHe7CuT?p=preview的示例

编辑：固定 plnkr 链接。

【讨论】：

是的，这确实有效。尽管您的 plunker 没有固定版本。至于不一致的行为，是的，动画有时似乎正在工作，但如果你仔细观察，这些项目实际上并没有移动，它们仍然在它们开始的地方。只有动画播放，实际移动失败。非常感谢。
糟糕。我已经修复了 plnkr 链接。
没问题。这解决了我遇到的问题，但仍然只是一种解决方法。我想将这个问题保持一段时间，以引起注意。理想情况下，我应该能够在同一个元素上使用ng-repeat 和ng-include，我找不到任何文档另有说明。目前，您的解决方法工作得很好。再次感谢。
我注意到在同一个元素上使用 ng-repeat 和 ng-include 的那一个上，最后没有删除一些动画类。这可能意味着这与stackoverflow.com/questions/20117511/… 有关