AngularJs：如何在價值變動開始動畫（NG-範圍）

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

在我的應用我使用animate.css從http://daneden.github.io/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。