angularjs重启css动画

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?

Answer 1

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

Answer 2

从元素中删除并添加脉冲类，以便再次进行动画处理。