如何在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" 
       } 
      ] 
     } 
    ] 
}