Question

假设我有一个模板：

<div ng-controller="ValueCtrl">
<dl>
  <dt>Points</dt>
  <dd>{{ points }}</dd>
</dl>
</div>

和控制器：

app.controller('ValueCtrl', function($scope) {
  $scope.points = 100;
  $scope.$on('points:changed', function(newPoints) {
    $scope.points = newPoints;
  });
});

在我的应用中，我使用http://daneden.github.io/animate.css/中的animate.css。

我希望points值更改动画。虽然我可以通过Javascript向元素添加animated pulse CSS类，但我不想直接从控制器中操作DOM。

有没有一种简单的方法可以通过CSS检测到变化？使用ng-repeat或ng-show等时，我可以通过使用CSS类（如ng-enter，ng-leave等）来检测这些内容。有没有办法检测绑定到范围的元素的类似事件？

Answer 1

可行的方法是使用ng-class使类以范围变量为条件（我将使用$scope.changed，一个布尔值）。

<强> HTML

<dl>
  <dt>Points</dt>
  <dd ng-class="{'animated bounce' : changed}">{{ points }}</dd>
</dl>

由于animate.css lib无法重置$scope.changed信号变量，因此我们必须在一段时间后执行此操作，以便后续更改能够触发动画。

<强>的Javascript

$scope.$on('points:changed', function(event, newPoints) {
    $scope.points = newPoints.points;
    $scope.changed = true;
    $timeout(function() {
      $scope.changed = false;
    }, 1000);
  });

我创建了一个完整的示例a JSBin here。

AngularJs：如何在价值变化（ng-scope）上开始动画

1 个答案: