Run some DOM manipulation when an element becomes visible in AngularJS

Question

Is it possible to elegantly run some code when some element becomes visible and another piece of code when it hides? I want to apply swipeable scroll areas here and there in a single-page app and it's only possible when elements are visible.

Answer 1

Angular 1.1.4 has added animation support into the framework. See here for more information.

You may be able to achieve your effect using a css3 transition, although I'm not exactly sure based on the information in your question. Alternatively you could create an animation in Javascript that will run on ng-show/ng-hide:

<div data-ng-hide="hidden == true" data-ng-animate="'myAnimation'">
  ...
</div>
<div data-ng-show="hidden == false" data-ng-animate="'myAnimation'">
  ...
</div>

...

//you can inject stuff!
myModule.animation('myAnimation-show', ['$rootScope', function($rootScope) {
  return { 
    setup : function(element) {
      //this is called before the animation
    },
    start : function(element, done, memo) {
      //this is where the animation is expected to be run
    }
  };
}]);

myModule.animation('myAnimation-hide', ['$rootScope', function($rootScope) {
  return { 
    setup : function(element) {
      //this is called before the animation
    },
    start : function(element, done, memo) {
      //this is where the animation is expected to be run
    }
  };
}]);

EDIT:

See an example here.