像Bootstrap這樣的東西可以折疊成角度

Question

我正在構建一個小應用程序，我正在使用AngularJS。 在應用程序內部我需要一個可折疊元素，使用Twitter Bootstrap就像在我的目標元素和觸發器上添加庫和一些標簽一樣簡單。

但我試圖不加載其他外部庫，如bootstrap或任何其他，所以我試圖用Angular實現相同的行為：

$scope.collapse = function(target) {

        var that = angular.element(document).find(target),

            transitioned = {
                'WebkitTransition' : 'webkitTransitionEnd',
                'MozTransition'    : 'transitionend',
                'OTransition'      : 'oTransitionEnd otransitionend',
                'msTransition'     : 'MSTransitionEnd',
                'transition'       : 'transitionend'
            },

            _transitioned = transitioned[ Modernizr.prefixed('transition') ],

            height = that.outerHeight(true);

        if (angular.element(that).hasClass("in")) {
            that.height(0);
        } else {
            that.height(height);
        };

        that.on(_transitioned, function() {
            that.toggleClass("in");
        });
    };

正如你可以看到，我試圖轉型的高度（如元素有高度的過渡），並在剛剛結束添加類in 。 但這並不是很好，因為如果我正在監聽過渡端，它將觸發該元素內的任何過渡端。

我需要一些幫助，我怎么能用角度重寫bootstrap可折疊？ 我不需要bootstrap所shown的事件， hidden或show ， hide ，我只需要通過過渡觸發元素的簡單折疊並保持我的元素高度動態（我不想要固定的高度，否則我只會使用CSS來實現崩潰）。 我只需要確定正確的方向:)

Answer 1

好像你想用CSS3過渡崩潰一些東西？

嗯，你可以這樣做，但控制器是錯誤的做法。 您應該使用指令或自定義指令來執行此操作。 幸運的是，您可以使用Angular本機指令（例如ng-class）來執行此操作。

HTML：

<button ng-click="open = !open">Toggle</button>    
<div ng-class="{ showMe: open }" class="collapsable">
  <h3>This should collapse</h3>
</div>

最重要的是，你的CSS：

  .collapsable {
    display: inline-block;
    overflow: hidden;
    height: 0;
    transition: height 1s;
    -webkit-transition: height 1s;        
    -moz-transition: height 1s;        
    -o-transition: height 1s;         
  }
  .collapsable.showMe {
    height: 100px;
  }

這是一個工作的吸收者。

需要注意的是，CSS3過渡不適用於所有瀏覽器。 特別是在IE中。 最后，我認為你可能最好使用其他人已經制作的插件，然后在一個看了一些布爾值的自定義指令中利用它。

我希望有所幫助。

---

編輯

height: auto不適用於CSS Transitions（至少截至本文發布時）。 所以，這就是為什么你真的想要使用別人的插件，而不是重新發明輪子。 即使它只是JQuery的animate（）方法。 用於滾動自己的指令的偽代碼將是這樣的:(假設您正在使用JQuery）

app.directive('collapseWhen', function () {
   return function(scope, elem, attr) {
     scope.$watch(attr.collapseWhen, function(val) {
        var clone = elem.clone().appendTo('body');
        var h = clone.height();
        clone.remove();
        scope.animate({ height: (val ? h : 0) + 'px' }, 1000);
     }
   }
});

然后你會像以下一樣使用它：

<button ng-click="foo = !foo">Toggle</button>
<div collapse-when="foo">

再說一次，上面是偽代碼 ，我不知道它是否會起作用，如果你真的想要自己動手，那只是給你一個想法。

Answer 2

如果我理解這些問題，我的解決方案是使用angular $ animateCss。 這里有文檔和示例https://docs.angularjs.org/api/ngAnimate/service/ $ animateCss

使用$ animateCss服務，您可以使用ngAnimate創建自己的動畫。 這是角度模塊的一個例子。 演示在以下鏈接中

var AppModule = angular.module('myApp', ['ngAnimate'])
  .controller('collapseCtrl', ['$scope', function($scope) {
    $scope.btn1 = $scope.btn2 = $scope.btn3 = false;
  }]).animation('.my-collapse', ['$animateCss', function($animateCss) {
    return {
      enter: function(element, doneFn) {
        var height = element[0].offsetHeight;
        return $animateCss(element, {
          from: {
            height: '0px',
            overflow: 'hidden'
          },
          to: {
            height: height + 'px'
          },
          cleanupStyles: true,
          duration: 0.3 // one second
        });
      },
      leave: function(element, doneFn) {
        var height = element[0].offsetHeight;
        return $animateCss(element, {
          to: {
            height: '0px',
            overflow: 'hidden'
          },
          from: {
            height: height + 'px'
          },
          cleanupStyles: true,
          duration: 0.3 // one second
        });
      }
    };
  }]);

https://plnkr.co/edit/DjU1A2vmiBB1dYXjkiN1

Answer 3

羅蘭，看一下angular-ui團隊的Bootstrap項目 。