Javascript 类似于Bootstrap的东西，可以折叠成角度

我正在构建一个小应用程序，我正在使用AngularJS。在应用程序内部，我需要一个可折叠的元素，使用Twitter引导程序就像在我的目标元素和触发器上添加库和一些标记一样简单

但我尽量不加载其他外部库，如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");
        });
    };

如您所见，我正在尝试转换高度（因为元素在高度上有一个转换），最后只需在中添加类

。但是，这并不能很好地工作，因为如果我在转换端监听，它将在该元素内的任何转换端触发

我需要一些帮助，我如何用angular重写可折叠的引导程序？我不需要bootstrap在
show
、
hidden
或
show
、
hide
上所发生的事件，我只需要触发一个简单的元素转换折叠，并保持元素高度的动态性（我不想要固定的高度，否则我只需要使用CSS来实现折叠）。我只需要指出正确的方向：）
似乎你想用CSS3转换来折叠一些东西

好吧，你可以这么做，但控制器是个错误的地方。您应该使用指令或自定义指令来实现这一点。幸运的是，您可以使用Angular本机指令（如ng类）来实现这一点

HTML:

切换
这应该崩溃

最重要的是，您的CSS：

.collapsable{
显示：内联块；
溢出：隐藏；
身高：0；
过渡：高度1s；
-webkit转换：高度1s；
-moz过渡：高度1s；
-o型过渡：高度1s；
}
.collapsable.showMe{
高度：100px；
}


需要注意的重要一点是，CSS3转换不会在所有浏览器中都起作用。特别是在IE中。最后，我认为你最好使用其他人已经制作的插件，然后在一个自定义指令中利用它，观察一些布尔值

我希望这有帮助


编辑

height:auto
不适用于CSS转换（至少在本文发布时是这样）。所以，这就是为什么你真的想使用别人的插件，而不是重新发明轮子。即使只是JQuery的animate（）方法。用于滚动您自己的指令的psuedo代码如下：（假设您使用的是JQuery）

app.directive（'collapseWhen'，function（）{
返回函数（范围、元素、属性）{
范围.$watch（attr.collapseWhen，函数（val）{
var clone=elem.clone（）.appendTo（'body'）；
var h=clone.height（）；
clone.remove（）；
动画（{height:（val？h:0）+'px'}，1000）；
}
}
});

然后你会像这样使用它：

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

切换

同样，上面的代码是psuedo代码，我不知道它是否会起作用，只是给你一个想法，如果你真的想自己动手的话。罗兰，请看angular ui团队的一个例子。
如果我理解这些问题，我的解决方案是使用angular$animateCss。这里有文档和示例$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
        });
      }
    };
  }]);

正如我在描述中提到的，
collapsable.showMe{height:100px；}
，高度应该是
auto
，这样我可以动态设置我的内容高度，因为更多的元素可以附加在单词后面…这就是为什么你会想使用其他人的插件。你需要做的是用javascript检查你的内部内容的高度，然后用CSS动态设置该高度。
auto
不会在我所知道的任何浏览器中都不能使用CSS转换。这不是我刚才在描述中所说的吗？在这种情况下，当我需要CSS转换时，自动高度不起作用。这就是为什么我试图先设置高度，然后在

类中添加高度为的

，该类具有高度：自动

。仅在转换端使用不起作用。由于类

collapse

将元素的高度设置为

0px

，获取元素的高度都不起作用。因此，这就是为什么我在这里问，是否有一种方法可以在没有引导程序所具有的事件的情况下进行操作，并且只进行折叠。没有理由感到不快。我正在尝试帮助您。您需要在d用CSS测量它的高度。我添加了一些演示代码来给你一个想法。我已经知道了；）手风琴不适合我的需要，我必须能够从标记中的任何地方触发折叠，在这种情况下，bootstrap项目有一个涵盖该内容的指令，但您不能将触发器置于指令上下文之外