angularjs restart css animation

Question

I am using angularjs and I am trying to trigger an animation each time a model property is changed. My controller:

function myCtrl($scope) {
    $scope.data.counter = 0;
    $scope.addCount = function() {
        $scope.data.counter ++;
    };

}

My html:

<div ng-controller="myCtrl">
    <button ng-click="addCount()">add count</button>
    <div class="bgimage"></div>
</div>

My css:

.bgimage {
      background-image: url('../images/a.png');
      background-position: right;
      background-size: 16px 14px;
      width: 16px;
      height: 14px;
}
.bgimage.pulse {
    -webkit-animation: pulse 1s both;
    -moz-animation: pulse 1s both;
    -o-animation: pulse 1s both;
    animation: pulse 1s both;
}

I want that each time 'count' changes, the 'bgimage' element will be 'pulsed'.

Any idea?

ilmgb · Accepted Answer · 2014-01-16 20:04:43Z

2

I did a little Plunker, using JS Animations and animating based on your counter variable. You can extend that example as you wish. I guess you just wanted to pulsate once (as using 'both' in your animation).

You could also go for CSS keyframes animations, as described here

answered Jan 16, 2014 at 20:04

ilmgb

7604 silver badges20 bronze badges

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

1 Comment

rustyx Over a year ago

thanks! Is there any way to restart animation from the beginning if I click on the button rapidly, i.e. before the previous animation is finished?

Emil A. · Accepted Answer · 2013-10-17 08:57:49Z

1

Remove and add the pulse class from the element so it will be animated once again.

answered Oct 17, 2013 at 8:57

Emil A.

3,4455 gold badges31 silver badges47 bronze badges

2 Comments

Naor Over a year ago

How? Should I do it with a directive?? How to integrate it with AngularJS?

Luke Over a year ago

This can be done with showThing = false; $timeout(() => { showThing = true; }, 1); and then using that variable in the view with an ng-show, and then apply some animations to the appropriate classes (see docs.angularjs.org/api/ng/directive/ngShow#animations)

Collectives™ on Stack Overflow

angularjs restart css animation

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related