angular-ui 使用 bootstrap 面板折叠 css 动画问题

Question

我在 Plunker 中创建了一个演示 , 我使用 angular-ui collaspe to work on bootstrap panel,
但似乎 ui 动画效果不佳，当我单击标题栏进行折叠时，panel-body 将动画为其默认填充 15px，然后立即消失。如果我删除 panel-body 的填充，动画看起来很流畅。那么如何保留填充并修复动画问题？

Answer 1

你应该把你的 panel-body 放在另一个带有 panel-collapse class 的标签中，像这样：

<div class="panel-collapse" collapse="collaspe1">
    <div class="panel-body">
        <div class="group-item" ng-repeat="group in recommendedGroups">
            <span>{{group.name}}</span>
            <button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
        </div>
    </div>
</div>

查看更新 demo. I got this clue from markup for Accordion。