javascript 类似于靴带，可折叠，有棱角

c9qzyr3d 于 2022-11-20 发布在 Java

关注(0)|答案(3)|浏览(144)

我正在构建一个小应用程序，我正在使用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。但这不是很好，因为如果我在转换结束时侦听，它将在该元素内的任何转换结束时触发。
我需要一些帮助，我怎样才能重写引导程序的可折叠只是与Angular ？我不需要引导程序的事件，如shown，hidden或show，hide，我只需要触发一个简单的折叠的元素与过渡，并保持我的元素高度动态（我不想要固定的高度，否则我会使用CSS来实现折叠）。我只需要在正确的方向上被精确定位：）

JavaScript

来源：https://stackoverflow.com/questions/14897926/something-like-bootstrap-collapsible-with-angular

3条答案

按热度按时间

jqjz2hbq1#

看起来你想用CSS3转换来折叠一些东西？
你可以这样做，但是控制器不是这样做的地方。你应该用指令或自定义指令来做。幸运的是，你可以用Angular原生指令来做，比如ng-class。
于飞：

<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，我不知道它是否会工作，它只是给予你一个想法，如果你 * 真的 * 想自己卷。

赞(0）回复(0）举报 2022-11-20

llmtgqce2#

如果我理解了这些问题，我的解决方案是使用angular $animateCss。
通过$animateCss服务，你可以使用ngAnimate创建你自己的动画。这是一个Angular 模块的例子。演示在下面的链接中

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

赞(0）回复(0）举报 2022-11-20

uujelgoq3#

罗兰，看一看来自angular-ui团队的Bootstrap Project。

赞(0）回复(0）举报 2022-11-20