angularjs引导程序水平折叠 [英] angularjs bootstrap collapse horizontally

问题描述

如何使角度引导程序折叠，水平折叠? 像是此处?

How can I make angular bootstrap collapse, collapsing horizontally? Something like here?

推荐答案

您将需要修改折叠指令或基于该指令创建一个新指令以仅处理宽度折叠.我建议使用后者，除非您希望应用程序中的所有折叠指令都水平折叠.

You are going to need to either modify the collapse directive or create a new directive based on that to handle collapsing the width only. I would suggest the latter unless you want all of the collapse directives in your app to collapse horizontally.

请参阅 在此处插入 ，以演示如何使用基于引导折叠指令的collapse-with指令.

除了更改指令之外，您还需要添加新类来处理过渡并为您要折叠的元素设置宽度(您也可以将指令更改为折叠到100％的宽度，或从100％的宽度折叠，不确定您的用例，但希望您能想到这个主意):

On top of changing the directive you will need to add new classes to handle the transition and set a width for the element you want to collapse (you could also change the directive to collapse to and from 100% width, not sure on your use case but hopefully you get the idea):

.well {
  width: 400px;  
}

.collapsing-width {
  position: relative;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

该指令只需要对expand，expandDone，collapse和collapseDone函数进行一些更改，并添加/删除上述css类，如下所示:

And the directive just requires a few changes to the expand, expandDone, collapse and collapseDone functions and adding/removing the css class above as follows:

.directive('collapseWidth', ['$transition', function ($transition, $timeout) {

    return {
      link: function (scope, element, attrs) {

        var initialAnimSkip = true;
        var currentTransition;

        function doTransition(change) {
          var newTransition = $transition(element, change);
          if (currentTransition) {
            currentTransition.cancel();
          }
          currentTransition = newTransition;
          newTransition.then(newTransitionDone, newTransitionDone);
          return newTransition;

          function newTransitionDone() {
            // Make sure it's this transition, otherwise, leave it alone.
            if (currentTransition === newTransition) {
              currentTransition = undefined;
            }
          }
        }

        function expand() {
          if (initialAnimSkip) {
            initialAnimSkip = false;
            expandDone();
          } else {
            element.removeClass('collapse').addClass('collapsing-width');
            doTransition({ width: element[0].scrollWidth + 'px' }).then(expandDone);
          }
        }

        function expandDone() {
          element.removeClass('collapsing-width');
          element.addClass('collapse in');
          element.css({width: 'auto'});
        }

        function collapse() {
          if (initialAnimSkip) {
            initialAnimSkip = false;
            collapseDone();
            element.css({width: 0});
          } else {
            // CSS transitions don't work with height: auto, so we have to manually change the height to a specific value
            element.css({ width: element[0].scrollWidth + 'px' });
            //trigger reflow so a browser realizes that height was updated from auto to a specific value
            var x = element[0].offsetHeight;

            element.removeClass('collapse in').addClass('collapsing-width');

            doTransition({ width: 0 }).then(collapseDone);
          }
        }

        function collapseDone() {
          element.removeClass('collapsing-width');
          element.addClass('collapse');
        }

        scope.$watch(attrs.collapseWidth, function (shouldCollapse) {
          if (shouldCollapse) {
            collapse();
          } else {
            expand();
          }
        });
      }
    };
}]);

您可能需要稍微调整一下CSS，以确保间距和边距与您的用例一致，但希望能有所帮助.

You may need to tweak the css a little to ensure the spacing and margins are consistent with your use cases but hopefully that helps.

这篇关于angularjs引导程序水平折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！