adding animation class to div from controller

Question

I added an animation class to a div with a variable.

 <div class="{{ItemsChange}}"></div>

In my controller:

$scope.addItem=function(item){
  $rootScope.ItemsChange=''
  $rootScope.ItemsChange='animated pulse'
 }

Now, I want this class to be applied everytime addItem is called, This is exactly why I am first adding empty string to variable and then the animation class so that animation class 'animated pulse' is applied each time $scope.addItem is called but animation class gets applied only the first time.

How do I fix this?

I'm not entirely sure what your hoping to accomplish, but you might look at the ngAnimate module to help with animations inside of AngularJS. If you are asking what I think you are asking, that module should help you get the job done. — Caleb Williams
– Caleb Williams, Commented Sep 18, 2015 at 13:44
That's exactly what i am using. animated pulse is a class from animate.css only — sim kaur
– sim kaur, Commented Sep 18, 2015 at 13:47
Could you update your question with your actual styles? Also, what directive are you expecting to watch with ngAnimate? You might try using ngClass instead of just class. — Caleb Williams
– Caleb Williams, Commented Sep 18, 2015 at 13:51
I meant that I am using daneden.github.io/animate.css for animation. Animate.css is coming from there and so is animated pulse CSS class. Only matter is that I want this class to be applied on every function call. — sim kaur
– sim kaur, Commented Sep 18, 2015 at 13:54
OK, class isn't animation aware, per ngAnimate documentation. Try using ngClass instead. — Caleb Williams
– Caleb Williams, Commented Sep 18, 2015 at 13:58

Caleb Williams · Accepted Answer · 2015-09-18 17:38:04Z

1

Sorry, I had assumed animate.css was optimized for Angular animations, but it isn't. To do things the way you are, just reset $scope.ItemsChagne inside a $timeout. So, add $timeout as a dependency to your controller and use

$scope.addItem = function(item) {
    $scope.ItemsChange = 'animated pulse';
    /**
     * each animation inside animate.css is one second, 
     * so give it an extra few milliseconds 
     */
    $timeout(function() {
        $scope.ItemsChange = false;
    }, 1100); 
});

It's not particularly pretty, but it does work.

EDIT

Try using ngClass instead like so:

ng-class="{animated: ItemsChange, pulse: ItemsChange}"

On plnkr

edited Sep 18, 2015 at 17:38

answered Sep 18, 2015 at 14:53

Caleb Williams

1,0755 silver badges12 bronze badges

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

6 Comments

sim kaur Over a year ago

It still did not. I tried setting ItemsChange to almost everything. Null ,empty string , undefined but still It does not switch :(

sim kaur Over a year ago

It still did not. I tried setting ItemsChange to almost everything. Null ,empty string , undefined but still It does not switch :(

sim kaur Over a year ago

No. No errors. Just that it does not animate again once the class has been assigned.

Caleb Williams Over a year ago

See my update, using ngClass should make that work. What we want is for .animated.pulse to be removed from the classList once the animation has completed. ngClass should do that.

sim kaur Over a year ago

No, It still animated only the first time :(

|

Collectives™ on Stack Overflow

adding animation class to div from controller

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related