AngularJs：如何在值更改时启动动画（ng-scope）

Question

Let's say I have a template:

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

and a controller:

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

In my app I use animate.css from http://daneden.github.io/animate.css/ .

I would like to have points value change animated. While I could add animated pulse CSS classes to the element via Javascript, I don't want to manipulate the DOM directly from the controller.

Is there a simple way I can detect a change through CSS? When using ng-repeat or ng-show etc. I can detect those by using CSS classes (like ng-enter , ng-leave etc). Is there a way to detect similar events for elements that are bound to the scope?

Answer 1

The way to go is to use ng-class to make the class conditional on a scope variable (I'll use $scope.changed , a boolean).

HTML

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

Since the animate.css lib cannot reset the $scope.changed signal variable, we have to do this after a certain time, so subsequent changes are able to trigger an animation.

Javascript

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

I have created a complete example as a JSBin here .