AngularJS temporarily disable animations

Question

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.

Pankaj Parkar · Accepted Answer · 2016-03-24 14:41:18Z

2

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.

answered Mar 24, 2016 at 14:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alon Eitan Over a year ago

I think that if the function is doing more stuff in the controller, it should first set the expression to false, and then put the rest of the code inside a $timeout (or something like that) to allow the view to render and remove the animation class

Aerus Over a year ago

@AlonEitan Thank you, the timeout was necessary indeed!

Collectives™ on Stack Overflow

AngularJS temporarily disable animations

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related