AngularJS animate navigation

Question

I have a HTML mockup like this

<div id="headbar" ng-swipe-left="ToogleMenu()">
  <div id="menu" ng-hide="menuTogglestate">
    <ul>
      <li><a href="#">Menu</a></li>
      ....
    </ul>
  </div>
</div>

How can I access in my controler in the Togglemenu function the #menu point or call a ng-animation I refer to menu in the mockup? Or do I have to add the animation on top of ng-hide from #menu? As I have a jQuery background, I'm a bit lost with the way AngularJS animations are working. But I don't want to use jQuery at all otherwise I will never lear Angular the right way. Just for the record, I would like to use javascript and not css keyframe animations.

Answer 1

Assuming your module variable is app

app.animation('#menu', function() {
  return {

    beforeAddClass : function(element, className, done) {
      if(className == 'ng-hide') {
        jQuery(element).animate({left: -200}, done);
      }
      else {
        done();
      }
    },

    removeClass : function(element, className, done) {
      if(className == 'ng-hide') {
        jQuery(element).css({left: -200}).animate({left: 0}, done);
      }
      else {
        done();
      }
    }

  };
});