如何为 Angular Material 中的 ng-repeat 的数据集更改禁用动画?
How to disable animations for changes in dataset for ng-repeat in Angular Material?
我正在使用 Angular Material 1.0.1 库,但我不希望在使用 ng-repeat
时延迟删除 DOM 元素。当数据集发生变化时,元素会多停留一点,看起来页面会滞后。
我发现用 $animate.enabled(false)
禁用所有动画可以解决这个问题,但我仍然想要一些动画,例如要显示的 $mdToast
。
如何仅针对 ng-repeat
的数据集更改禁用动画?
经过一些研究,我想我找到了答案。
AngularJS 的动画是根据 CSS 转换规则构建的,所以我只是让对象在 "animated out".[=11= 时立即消失 CSS ]
.repeated .ng-leave {
display: none;
}
此方法有效,但仍会向新对象附加不必要的动画 类,这可能会影响性能。欢迎就如何解决此问题提出任何建议。
如您所知,您可以使用 $animate
。有一个函数将元素作为参数,因此您不必全局禁用它:$animate.enabled([element], [enabled]);
编写一个禁用指令元素上的动画的指令应该很容易。
或者,您可以将 $animateProvider
配置为 $animateProvider.classNameFilter([expression]);
以排除具有特定 CSS class 的元素,该参数是一个 RegExp - 所以类似于 /^(?:(?!repeated).)*$/
可能有效(未测试)。
如果您追求性能,那么第二种方法可能就是您所追求的。来自文档:
Sets and/or returns the CSS class regular expression that is checked when performing an animation. Upon bootstrap the classNameFilter value is not set at all and will therefore enable $animate to attempt to perform an animation on any element that is triggered. When setting the classNameFilter value, animations will only be performed on elements that successfully match the filter expression. This in turn can boost performance for low-powered devices as well as applications containing a lot of structural operations.
我正在使用 Angular Material 1.0.1 库,但我不希望在使用 ng-repeat
时延迟删除 DOM 元素。当数据集发生变化时,元素会多停留一点,看起来页面会滞后。
我发现用 $animate.enabled(false)
禁用所有动画可以解决这个问题,但我仍然想要一些动画,例如要显示的 $mdToast
。
如何仅针对 ng-repeat
的数据集更改禁用动画?
经过一些研究,我想我找到了答案。 AngularJS 的动画是根据 CSS 转换规则构建的,所以我只是让对象在 "animated out".[=11= 时立即消失 CSS ]
.repeated .ng-leave {
display: none;
}
此方法有效,但仍会向新对象附加不必要的动画 类,这可能会影响性能。欢迎就如何解决此问题提出任何建议。
如您所知,您可以使用 $animate
。有一个函数将元素作为参数,因此您不必全局禁用它:$animate.enabled([element], [enabled]);
编写一个禁用指令元素上的动画的指令应该很容易。
或者,您可以将 $animateProvider
配置为 $animateProvider.classNameFilter([expression]);
以排除具有特定 CSS class 的元素,该参数是一个 RegExp - 所以类似于 /^(?:(?!repeated).)*$/
可能有效(未测试)。
如果您追求性能,那么第二种方法可能就是您所追求的。来自文档:
Sets and/or returns the CSS class regular expression that is checked when performing an animation. Upon bootstrap the classNameFilter value is not set at all and will therefore enable $animate to attempt to perform an animation on any element that is triggered. When setting the classNameFilter value, animations will only be performed on elements that successfully match the filter expression. This in turn can boost performance for low-powered devices as well as applications containing a lot of structural operations.