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

Question

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

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

我知道我不应该从我的控制器操作我的 DOM，因为这是一种不好的做法。我应该使用监听路由变化的指令吗？服务？

（例子）

ul
  li
  li
  li
    ul
      li
      li

Answer 1

你应该看看 ngAnimate。这里有教程

然后，您将能够在应该动画的元素上指定动画。

例如，您可以在基于范围内的值动态显示/隐藏的元素上指定“进入”和“离开”动画。然后可以在 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

这非常类似于： 使用 ng-show 和 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"
                }
            ]
        }
    ]
}