twitter-bootstrap 像 Bootstrap 一样可以折叠的东西
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14897926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Something like Bootstrap collapsible with angular
提问by Roland
I'm building a small app and I'm using AngularJS. Inside the app I need a collapsible element and using Twitter Bootstrap would be as easy as adding the library and some tags on my target element and the trigger.
我正在构建一个小应用程序，我正在使用 AngularJS。在应用程序内部，我需要一个可折叠元素，使用 Twitter Bootstrap 就像在我的目标元素和触发器上添加库和一些标签一样简单。
But I'm trying not to load other external libraries like bootstrap or any other, so I was trying to achieve the same behavior with Angular :
但我试图不加载其他外部库，如 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");
});
};
As you can see I'm trying to transition the height ( as the element has a transition on the height ) and in the end just add the class in. But that isn't working very well because if I'm listening on the transition end it will trigger on any transition end inside that element.
如您所见，我正在尝试转换高度（因为元素在高度上有转换），最后只需添加 class in。但这并不能很好地工作，因为如果我在过渡端收听，它将在该元素内的任何过渡端触发。
I would need some help with this, how can I rewrite the bootstrap collapsible just with angular ? I don't need the events that bootstrap has like on shown, hiddenor show, hide, I just need to trigger a simple collapse of the element with transition and keep my elements height dynamic ( I don't want a fixed height, otherwise I would just use CSS to achieve the collapse ). I just need to be pinpointed in the right direction :)
我需要一些帮助，如何仅使用 angular 重写可折叠的引导程序？我不需要引导程序所具有的事件 on shown, hiddenor show, hide，我只需要通过过渡触发元素的简单折叠并保持我的元素高度动态（我不想要一个固定的高度，否则我只会使用CSS实现折叠）。我只需要确定正确的方向:)
回答by Ben Lesh
Seems like you want to just collapse something with CSS3 transitions?
似乎您只想使用 CSS3 转换折叠某些内容？
Well, you can do that, but the controller is the wrong place to be doing that. You should do that with directives or in a custom directive. Fortunately, you can do it with the Angular native directives, such as ng-class.
好吧，你可以这样做，但控制器是错误的地方。您应该使用指令或在自定义指令中执行此操作。幸运的是，您可以使用 Angular 原生指令来实现，例如 ng-class。
HTML:
HTML：
<button ng-click="open = !open">Toggle</button>
<div ng-class="{ showMe: open }" class="collapsable">
<h3>This should collapse</h3>
</div>
And most importantly, your CSS:
最重要的是，您的 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.
Important to note, CSS3 transitions will not work in all browsers. Particularly in IE. In the end, I think you'd probably be better off using a plugin that someone else already made, and then leveraging it in a custom directive that watched some boolean value.
重要的是要注意，CSS3 过渡不适用于所有浏览器。特别是在 IE 中。最后，我认为您最好使用其他人已经制作的插件，然后在观察一些布尔值的自定义指令中利用它。
I hope that helps.
我希望这有帮助。
EDIT
编辑
height: autodoes not work with CSS Transitions (at least as of the time of this post). So, this is why you'll really want to use someone else's plugin, rather than reinvent the wheel. Even if it's just JQuery's animate() method. The psuedo-code for rolling your own directive would be something like so: (presuming you're using JQuery)
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);
}
}
});
and then you'd use it like:
然后你会像这样使用它：
<button ng-click="foo = !foo">Toggle</button>
<div collapse-when="foo">
Again, the above is psuedo-code, I have no idea if it will work or not, it's just to give you an idea to follow if you reallywant to roll your own.
同样，以上是伪代码，我不知道它是否会起作用，这只是为了给您一个想法，如果您真的想自己动手。
回答by user3083618
If i understand the questions, my solution is to use angular $animateCss. Here there are the docs and examples https://docs.angularjs.org/api/ngAnimate/service/$animateCss
如果我理解这些问题，我的解决方案是使用 angular $animateCss。这里有文档和示例https://docs.angularjs.org/api/ngAnimate/service/$animateCss
With $animateCss service you can create your own animation using ngAnimate. This is an example of the angular module. The demo is in the link below
使用 $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
});
}
};
}]);
回答by Maxim Grach
Roland, take a look at Bootstrap Projectfrom angular-ui team.
Roland，看看angular-ui 团队的Bootstrap 项目。
