4

我正在使用 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”元素都会被“脉冲”。

任何想法?

4

2 回答 2

2

我做了一点Plunker,使用 JS 动画并根据您的计数器变量制作动画。您可以根据需要扩展该示例。我猜您只是想跳动一次(就像在动画中使用“两者”一样)。

您也可以使用 CSS 关键帧动画,如此处所述

于 2014-01-16T20:04:43.393 回答
1

从元素中删除并添加脉冲类,使其再次动画化。

于 2013-10-17T08:57:49.820 回答