如何在AngularJS中动画菜单打开/关闭

Question

我正在尝试确定解决此问题的“正确”方法。

我有一个子菜单的菜单。我想动画（使用jQuery转换）当我的路线更改时，滑动向下滑动效果&。

我知道我不应该从我的控制器操纵我的DOM，因为这是一个坏习惯。我应该使用侦听路由更改的指令吗？服务？

（例如）

ul 
    li 
    li 
    li 
    ul 
     li 
     li 

Answer 1

你应该看看ngAnimate。有一个教程here

然后，您将能够对应该动画的元素进行decleratively动画。

例如，您可以根据范围内的值为动态显示/隐藏的元素指定“输入”和“离开”动画。随后可以在CSS3（推荐）中指定动画，或使用jQuery，mootools和其他库。

<li ng-repeat="item in parent.items" ng-animate="'slide'" ng-show="parent.open">{{item.text}}</li> 

编辑：此API已被弃用，但它是一个更好的API和和类似的方法。在这里阅读更多关于它的信息：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html。

Answer 2

这是非常相似的： Slide up/down effect with ng-show and ng-animate

该指令：https://github.com/EricWVGG/AngularSlideables将创建一个简单的API添加滑动的任何元素。

如果你愿意你jQuery：https://github.com/onokumus/metisMenu可以为你创建可扩展的菜单。

如果您从后端填充菜单，则类似于菜单控制器中的以下内容将允许您设置导航，然后实例化菜单。

 $scope.response = null; 
     $http.get(ENV.api.endpoint+"/menu"). 
     then(function(response) { 
      $scope.navItems = response.data; 
      $timeout(function() { 
       jQuery('.metismenu').metisMenu(); 
      }); 
     }, function(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
     }); 

我的导航角码是：（注意navItems使得它只能填充一个时间::）

<ul side-navigation class="nav metismenu" id="side-menu" > 
     <li ui-sref-active="active" ng-repeat="Item in ::navItems.Regular"> 
      <a ui-sref="{{Item.state}}"><i class="fa {{Item.icon}}"></i> <span class="nav-label">{{Item.title}}</span></a> 
     </li> 
     <li ng-class="{active: $state.includes(Item.state)}" ng-repeat="Item in ::navItems.DropDown"> 
      <a href=""><i class="fa" ng-class="Item.icon"></i> <span class="nav-label">{{Item.title}}</span><span class="fa arrow"></span></a> 
      <ul class="nav nav-second-level collapse" ng-class="{in: $state.includes(Item.state)}"> 
       <li ui-sref-active="active" ng-repeat="Subitem in Item.items"> 
        <a ui-sref="{{Subitem.state}}"><i class="fa {{Subitem.icon}}"></i> {{Subitem.title}}</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 

的JSON则是这样的：

{ 
    "Regular": [ 
     { 
      "title": "Directory", 
      "icon": "fa-archive", 
      "state": "directory" 
     } 
    ], 
    "DropDown": [ 
     { 
      "title": "Accounting", 
      "icon": "fa-dollar", 
      "state": "accounting", 
      "items": [ 
       { 
        "title": "Approve Time", 
        "state": "accounting.staffTimeclockActApprove", 
        "icon": "fa-check-circle-o" 
       }, 
       { 
        "title": "Notify Time", 
        "state": "accounting.staffTimeclockActNotify", 
        "icon": "fa-envelope-o" 
       } 
      ] 
     } 
    ] 
}