I'm using Angular Material 1.0.1 library, but I don't want DOM elements' removal to be delayed when using ng-repeat. When the dataset changes, elements stick around for a little bit more and it looks like the page is lagging.
I found out that disabling all animations with $animate.enabled(false) fixes that problem, but still I want some animations, such as for $mdToast to be shown.
How to disable animations only for changes in dataset for ng-repeat?
After doing some research, I think I found my answer. AngularJS's animations are built to work with CSS transition rules, so I just made the objects disappear with CSS as soon as they were being "animated out".
.repeated .ng-leave {
display: none;
}
This approach works, but still attaches unnecessary animation classes to new objects, which might affect performance. Any suggestions on how to fix this are welcome.
As you already found out, you can use $animate. There is a function that takes the element as argument, so you don't have to disable it globally: $animate.enabled([element], [enabled]);
It should be pretty easy to write a directive which disables the animations on the directive's element.
Alternatively you can probably configure the $animateProvider with $animateProvider.classNameFilter([expression]); to exclude elements with a certain CSS class, the parameter is a RegExp - so something like /^(?:(?!repeated).)*$/ may work (not tested).
If you are after performance then the second approach is probably what you are after. From the docs:
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.
