AngularJS动画div更新范围

Question

每当$ scope变量更新时，我都试图用一些内容为div设置动画。 我想向用户提供已发生更新的反馈。

在我的控制器中，我通过这样的websocket更新$ scope：

socket.syncUpdates('item', $scope.items, function(event, item, array) {
    $scope.items = array;
});

我无法理解如何做到这一点。 我正在使用ng-animate和animation.css

Answer 1

socket.syncUpdates('item', $scope.items, function(event, item, array) {
    $scope.items = array;
    $scope.$apply();
});

在syncUpdates中，使用$apply()触发$digest循环。

现在你可以在两个地方做动画了。 要么在这个syncUpdates里面，在$scope.$apply()下面$scope.$apply() else在一个单独的$watch 。

$scope.$watch("items", function(newValue, oldValue) {
     // your animation code here
}, true);

为div设置动画，以下是一个示例：

myApp.animation(".fade", function () {
  return {
    addClass: function (element, className) {
      TweenMax.to(element, 1, {opacity: 0});
    },    
    removeClass: function (element, className) {
      TweenMax.to(element, 1, {opacity: 1});
    }
  }
})

在你的控制器中：

在控制器功能中注入$animate 。 然后用

    $animate.addClass(document.querySelector("selector"), "fade");