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以確保間距和邊距與您的用例一致，但希望這有助於。