AngularJS animate div on scope update

Question

I'm trying to animate a div with some content whenever the $scope variable is updated. I want to give the user feedback that an update has occurred.

In my controller I update the $scope through a websocket like this:

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

I can't get my head around how to do this. I'm using ng-animate and animation.css

mohamedrias · Accepted Answer · 2015-04-11 10:27:57Z

3

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

In your syncUpdates, trigger $digest cycle using $apply().

Now you can do animation in two places. Either do it inside this syncUpdates itself below the $scope.$apply() else in a separate $watch.

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

To animate the div, Here is one sample:

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

In your controller:

Inject $animate inside your controller function. Then use

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

edited Apr 11, 2015 at 10:27

answered Apr 11, 2015 at 10:22

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Warbo Over a year ago

Thanks! I'm going to try it out, do you have an example with using animate.css? Also this doesn't use the ng-animate at all does it?

mohamedrias Over a year ago

check this one: thinkster.io/egghead/animating-the-angular-way it will be useful

Collectives™ on Stack Overflow

AngularJS animate div on scope update

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related