Search code examples
cssangularjscss-animationsng-animate

AngularJS temporarily disable animations

I have a pretty complex ng-repeat. The number of displayed items can be controlled by two buttons. The first button removes a single element from the ng-repeat by using a filter. The second button removes a bunch of elements and displays a bunch of other elements (also by using a filter).

I currently have an animation on the ng-repeat like this: 

<style>
   .animation {
    -webkit-transition: 1s;
  }
  .animation.ng-enter {
    opacity: 0;
  }
  .animation.ng-enter.ng-enter-active {
     opacity: 1;
   }
   /* Similar for ng-leave */
</style>

<div class="animation" data-ng-repeat="item in items"> ... </div>

When the user clicks the first button I want the elements to use the animation. When the user clicks the second button I want to disable any animations.

I'm using AngularJS 1.2.16.

Solution

  • You could use ng-class directive to have animation class conditionally. Remove animation class when you don't want it, specifically saying on click of second button.

    <div ng-class="{animation: expression }" data-ng-repeat="item in items"> ... </div>

    In above snippet expression will be condition/scope variable which will set to false so that animation will get removed and animation will get disabled.