Example

Question

我尝试使用css3过渡以角度创建手风琴菜单。我在动画排序方面遇到了问题。在当前页面中，当我点击＆＃34;逮捕＆＃34;在菜单中，它首先展开，然后任何其他当前打开的元素（在这种情况下＆＃34; general＆＃34;）折叠。两个动画如何同时工作？

app.directive('menuaccordion', function() {
return {
    restrict : 'A',


    link : function(scope, elem, attrs) {
        var $el = angular.element(elem);
        if($el.hasClass('app-nav-menu-lv1')) {
          var name = elem.attr('data-name')
          scope.$on('hidelevel1', function(e, data){
              if(data != name) {
                var container = $el.next()
                if(container.hasClass('in')) {
                  container.removeClass('in');
                }
              }
        });
        }

      scope.$on('hidelevel2', function(e, data){
         console.log($el)
      });

        elem.on('click', function(e) {
          e.preventDefault();
          var container = angular.element(elem.next());
          if(container.hasClass('in')) {  //is expanded
            container.removeClass('in'); 
          }else{                          //is collapsed
            container.addClass('in');
            var name = elem.attr('data-name')
            if($el.hasClass('app-nav-menu-lv1')) {
              scope.$broadcast('hidelevel1', name);
            }else if($el.hasClass('app-nav-menu-lv2')) {
              scope.$broadcast('hidelevel2', name);
            }

          }

        });

    }
 }
});

Plnkr：http://plnkr.co/edit/Sreh0yIDvq4oy4Nhvlea?p=preview

Answer 1

实际上，这两种动画都在同一时间发生。问题是您设置了max-height 1000px，所以它发生的是当它打开的ul开始显示时，高度它应该隐藏的那个被减少了，但你不能注意它，因为它太高而且开始隐藏内容需要很长时间。所以，也许您可以将max-height更改为220px，如下所示：

.collapse.in {
    max-height:220px;
}

另外，我已经查看了你的指令，我认为它可以改进很多，就像这样（它只是一个建议，与你的问题无关）：< / p>

app.directive('menuaccordion', function($compile) {
    return {
        restrict : 'A',
        compile:function (elem, attrs){
          var aTag = elem.find('a');
          var itemName = elem.attr('data-name');
          aTag.attr('ng-click', "select('" + itemName + "')");
          elem.next().attr('ng-class', "{in: selectedItem=='" + itemName + "'}");

          return function(scope, elem, attrs) {
              scope.select=function(name){
                scope.$parent.selectedItem=scope.$parent.selectedItem==name?'':name;
              };
            };
        }
    };
});

手风琴菜单动画排序

1 个答案:

Example