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

Posted 2023-03-06

【中文标题】如何在AngularJS中动画菜单打开/关闭

【英文标题】：How to animate menu open/close in AngularJS

【发布时间】：2013-04-13 16:15:22

【问题描述】：

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

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

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

（示例）

ul
  li
  li
  li
    ul
      li
      li

【参考方案1】：

这非常类似于： 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"
                
            ]
        
    ]

【参考方案2】：

你应该看看 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。

【讨论】：

嘿 Kenneth，我如何从控制器手动触发动画？这可能吗？

您可以指定控制器中应该使用什么动画，并指定变量而不是字符串作为ng-animate的参数。您只能通过显示或隐藏元素来触发动画，例如在 ng-repeat 中。另一种方法是编写一个指令，向元素添加和删除类，然后再次与服务对话。

请注意，ng-animate= 在 Angular 1.2 中已弃用：yearofmoo.com/2013/08/…