像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">

再说一遍,上面是伪代码,我不知道它是否会起作用,如果你真的想要自己动手,那只是给你一个想法.