angularjs重启css动画

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

我做了一点Plunker，使用JS动画和基于你的计数器变量的动画。您可以根据需要扩展该示例。我猜你只是想跳一次（就像动画中使用＆＃39;两者一样）。

您还可以使用CSS关键帧动画，如here

所述

Answer 2

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