Question

如何使angular bootstrap崩溃，水平折叠？类似here的内容？

Answer 1

您将需要修改折叠指令或基于此指令创建一个新指令来处理折叠宽度。除非您希望应用中的所有折叠指令水平折叠，否则我建议使用后者。

请参阅 Plunk here ，了解如何使用基于bootstrap collapse指令的collapse-with指令。

除了更改指令之外，您还需要添加新类来处理转换并为要折叠的元素设置宽度（您还可以将指令更改为折叠到100％宽度，不确定你的用例，但希望你能得到这个想法）：

.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类，如下所示：

.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以确保间距和边距与您的使用情况一致，但希望这会有所帮助。

angularjs bootstrap水平折叠

1 个答案:

angularjs bootstrap水平折​​叠

1 个答案:

angularjs bootstrap水平折叠