如何为Angular Material中的ng repeat禁用数据集中更改的动画

Question

我使用的是Angular Material 1.0.1库，但我不希望在使用ng-repeat时延迟删除DOM元素。当数据集发生变化时，元素会停留更长的时间，看起来页面会滞后。

我发现用$animate.enabled(false)禁用所有动画可以解决这个问题，但我仍然希望显示一些动画，例如$mdToast。

如何仅针对ng-repeat数据集中的更改禁用动画？

Answer 1

经过一些研究，我想我找到了答案。AngularJS的动画是为使用CSS转换规则而构建的，所以我只是让对象在"动画化"后立即用CSS消失。

.repeated .ng-leave {
    display: none;
}

这种方法有效，但仍然会将不必要的动画类附加到新对象，这可能会影响性能。欢迎就如何解决此问题提出任何建议。

Answer 2

正如您已经发现的，您可以使用$animate。有一个函数将元素作为参数，因此不必全局禁用它：$animate.enabled([element], [enabled]);

编写一个禁用指令元素上的动画的指令应该很容易。

或者，您可以使用$animateProvider.classNameFilter([expression]);配置$animateProvider，以排除具有特定CSS类的元素，参数是RegExp，因此类似/^(?:(?!repeated).)*$/的东西可能有效（未测试）。

如果你追求的是性能，那么第二种方法可能就是你追求的。来自文档：

设置和/或返回在执行动画时检查的CSS类正则表达式。在引导时，classNameFilter值根本没有设置，因此将使$animate能够尝试对任何触发的元素执行动画。设置classNameFilter值时，将仅对成功匹配筛选器表达式的元素执行动画。这反过来可以提高低功耗设备以及包含大量结构操作的应用程序的性能。