1

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

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

为指令支持的所有三个(进入离开移动)动画设置了 CSS 过渡。ng-repeat所有三个动画在使用时都可以正常工作ng-include,但只有enter动画在使用ng-include加载列表中每个项目的模板时才有效。

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

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

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

4

1 回答 1

1

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

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

如果是这样,是否有已知的解决方法?

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

编辑:固定 plnkr 链接。

于 2013-11-25T12:52:39.713 回答