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可折叠？我不需要引导程序在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;
  }

And here is a plunker of it working.

重要的是要注意，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">

同样，以上是 psuedo-code ，我不知道它是否会起作用，如果你真的想要它只是给你一个想法滚动你自己。

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

Roland，从angular-ui团队看看Bootstrap Project。

像Bootstrap这样的东西可以折叠成角度

3 个答案: