Javascript 无指令的CSS AngularJS手风琴-固定高度问题

我希望通过一个小的手风琴示例来证明AngularJS是多么的酷和简单，整个事情非常简单，在我的控制器中，我有一个数组，我有一个ng repeat，当ng repeat的$index与范围变量匹配时，我绑定一些数据并应用css规则。这些都是很简单的东西，比如，这是我的控制器（我已经减少了这个例子的一些文本）

在我看来，这是我的重复

<div data-ng-repeat="ptype in paymentTypes track by $index" data-ng-click="togglePayments($index)">
  <div class="row u-padding-vert-s">
    <div class="col-xs-6 payment-type" data-ng-bind="ptype.name"></div>
    <div class="col-xs-6 text-right"><!-- put a logo here later --></div>
  </div>

  <div class="row u-slide-down" data-ng-hide="selectedType !== $index">
    <div class="col-xs-12" data-ng-bind="ptype.text">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-5 u-border-top-1"></div>
    <div class="col-xs-2 toggle-tab text-center">
      <span class="icon-ic_list_arrow_down"></span>
    </div>
    <div class="col-xs-5 u-border-top-1"></div>
  </div>
</div>

非常酷，但是这个例子依赖于所有隐藏的div都是相同的高度。在现实世界中，我更喜欢隐藏的div，它的高度灵活，更具动态性！因为内容是不同的，甚至可能在某些时候包含HTML。现在，当我将css设置为

height:auto

在

.u-slide-down

类中，动画丢失。我不想为此编写指令，因为我希望我的示例尽可能简单，所以有人能建议我如何处理CSS以允许动态高度并保留动画吗？同时，我会尝试在。。。等一下

<div data-ng-repeat="ptype in paymentTypes track by $index" data-ng-click="togglePayments($index)">
  <div class="row u-padding-vert-s">
    <div class="col-xs-6 payment-type" data-ng-bind="ptype.name"></div>
    <div class="col-xs-6 text-right"><!-- put a logo here later --></div>
  </div>

  <div class="row u-slide-down" data-ng-hide="selectedType !== $index">
    <div class="col-xs-12" data-ng-bind="ptype.text">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-5 u-border-top-1"></div>
    <div class="col-xs-2 toggle-tab text-center">
      <span class="icon-ic_list_arrow_down"></span>
    </div>
    <div class="col-xs-5 u-border-top-1"></div>
  </div>
</div>

.u-slide-down {
  transition: .3s linear all;
  overflow: hidden;
  background: yellowgreen;
  height: 200px;
}

.u-slide-down.ng-hide {
  height: 0px;
}