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

JS アニメーションを使用し、カウンター変数に基づいてアニメーション化する少しのPlunkerを実行しました。必要に応じてその例を拡張できます。1回脈動したかっただけだと思います（アニメーションで「両方」を使用しているように）。

ここで説明されているように、CSS キーフレーム アニメーションを使用することもできます。

于 2014-01-16T20:04:43.393 に答える