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

Question

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

我有一个带子菜单的菜单。我想动画（使用jQuery过渡）一个上滑和放大我的路线改变时的下滑效果。

我知道我不应该从我的控制器操作我的DOM，因为这是一个糟糕的做法。我应该使用听取路线变化的指令吗？服务？

（实施例）

ul
  li
  li
  li
    ul
      li
      li

Answer 1

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

然后，您将能够对应该设置动画的元素进行装饰性地指定动画。

例如，您可以在根据范围中的值动态显示/隐藏的元素上指定“输入”和“离开”动画。然后可以在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.
        });

我的导航角度代码是:(注意:: in 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"
                }
            ]
        }
    ]
}