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-animation我在模型中引用菜单？或者我是否必须在#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();
      }
    }

  };
});

AngularJS动画导航

1 个答案: