AngularJs:如何在值变化时启动动画(ng-scope）

AngularJs: How to start animation on value change (ng-scope)

本文关键字：动画 启动 ng-scope 变化 AngularJs      更新时间：2023-09-26

假设我有一个模板：

<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;
  });
});

在我的应用程序中，我使用动画.css来自 http://daneden.github.io/animate.css/。

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

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

要走的方法是使用 ng-class 使类以作用域变量为条件（我将使用 $scope.changed ，一个布尔值）。

.HTML 

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

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

爪哇语

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

我在这里创建了一个完整的示例作为 JSBin。

相关文章：