angularjs - 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 动画？还是我必须在#menu 的ng-hide 之上添加动画？因为我有 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();
      }
    }

  };
});