Search code examples
angularjsanimationangular-materialangularjs-animation

How to disable animations for changes in dataset for ng-repeat in Angular Material?


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?


Solution

  • 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.