如何在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类正则表达式。在bootstrap时，classNameFilter值根本没有设置，因此将启用$ animate以尝试对触发的任何元素执行动画。设置classNameFilter值时，仅对成功匹配过滤器表达式的元素执行动画。这反过来可以提高低功耗设备以及包含大量结构操作的应用程序的性能。