angularjs引导崩溃horizo​​ntaly

Question

我怎样才能让angular bootstrap倒塌，倒塌水平？ 类似于here？

Answer 1

你将需要进行修改崩溃指令或创建基于该处理仅倒塌宽度的新指令。我会建议后者，除非你想让你的应用中的所有折叠指令水平折叠。

请参阅Plunk here演示使用基于引导折叠指令的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以确保间距和边距与您的用例一致，但希望这有助于。