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() 中进行，要么在单独的 $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");

AngularJS 在范围更新时动画 div

AngularJS animate div on scope update

html

javascript

angularjs

animate.css

ng-animate