使用 AngularJS 和 CSS 动画的手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21491156/
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
Accordion using AngularJS and CSS animations
提问by user2832814
Using just Angular JS Animate and Css Animation, I am trying to create an Expand/Collapse (Accordion) similar to the bootstrap collapse seen here: http://getbootstrap.com/javascript/#collapse
仅使用 Angular JS Animate 和 Css Animation，我试图创建一个展开/折叠（手风琴）类似于此处看到的引导程序折叠：http: //getbootstrap.com/javascript/#collapse
I have an issue with the expandable items, they pop back and forth depending on height of the expanded "show" content. See my Plunker for more a visual
我对可扩展项目有问题，它们会根据扩展的“显示”内容的高度来回弹出。查看我的 Plunker 以获得更多视觉效果
My work so far:
我到目前为止的工作：
var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);
expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
$scope.active = true;
$scope.active1 = true;
});
回答by Tome Pejoski
You should use UI Bootstrap Accordion. This component is written in pure AngularJS.
您应该使用UI Bootstrap Accordion。这个组件是用纯 AngularJS 编写的。
回答by Ritu Shikha Singh
<div class="list card benefit-listCard">
<h3 class="accordion" ng-class="{active:accordion1}">
<a href ng-click="accordion1=!accordion1" style="padding:0px;"><div class="item item-avatar benefit-itemAvatar">
<img src="img/aws.png" class="service-img">
<h2>Amazon Web Services</h2>
<button class="button button-small button-outline button-calm detail-button">Get Deals</button> <div
class="fa fa-fw list-arrow" ng-class="{'ion-minus-circled': accordion1, 'ion-plus-circled' : !accordion1}" style="float:right;color:#44c8f5;font-size:25px;margin-top:10px;">
</div>
</div>
</a>
Lorem Ipsum1
Lorem Ipsum1
