AngularJS анимированная навигация

Question

У меня есть такой макет HTML

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

Как я могу получить доступ к своему контроллеру в функции Togglemenu к точке #menu или вызвать ng-анимацию, к которой я обращаюсь в меню в макете? Или мне нужно добавить анимацию поверх ng-hide из #menu? Поскольку у меня есть фон jQuery, я немного растерялся из-за того, как работают анимации AngularJS. Но я вообще не хочу использовать jQuery, иначе я никогда не выучу Angular правильным образом. Просто для записи, я хотел бы использовать javascript, а не анимацию ключевых кадров CSS.

Answer 1

Предполагая, что ваша переменная модуля 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();
      }
    }

  };
});