angularjs restart css animation

Question

我正在使用angularjs，每次模型屬性發生變化時我都會嘗試觸發動畫。 我的控制器：

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

} 

我的HTML：

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

我的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; 
} 

我想，每次 '計數' 的變化， 'bgimage' 元素將被「脈衝」。

任何想法？

Answer 1

從元素中刪除並添加脈衝類別，以便再次進行動畫處理。

Answer 2

我做了一點Plunker，使用JS動畫和基於您的計數器變量的動畫。您可以根據需要擴展該示例。我想你只是想搏動一次（就像在動畫中使用'兩個'一樣）。

你也可以去CSS關鍵幀動畫，如上所述here