angularjs引导崩溃horizo​​ntaly [英] angularjs bootstrap collapse horizontaly

问题描述

我怎样才能让角度引导倒塌，倒塌水平？
如这里？

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.

请看到 普拉克这里 演示如何使用的崩溃，基于引导崩溃指令指令。

在改变，你将需要添加新的类来处理的过渡，并为要折叠元素的宽度指令的顶部（你也可以改变指令崩溃，并从宽度为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;
}

和指令只需要几个变化展开， expandDone ，崩溃和 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引导崩溃horizo​​ntaly的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！