动画片。展开 div 高度而不直接设置其高度（角度应用程序）

Question

这是我的代码。 http://jsfiddle.net/anastsiacrs/Lt7aP/1639/

[请在 jsfiddle 中运行示例，stackoverflow 的代码无法运行]

function XController($scope) {
    $scope.model={isHidden:true};
}

.open-div{
  background-color:red;
  //height:260px;
}
.hidden-div{
  background-color:green;
  //height:60px;
}
.transformable {
    -webkit-transition: 3000ms linear;
    -moz-transition: 3000ms linear;
    -o-transition: 3000ms linear;
    -ms-transition: 3000ms linear;
    transition: 3000ms linear;
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
  <input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
  <input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
  <p>{{isHidden}}  </p>
  <div ng-hide="model.isHidden"  >
     <div>Hello XXX</div>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
  </div>
</div>
</div>

1. 如您所见，没有明确的高度动画不适用于此属性。解决此问题的可能方法是什么。可能有一些图书馆或链接，对我有帮助。
2. 如果直接将高度设置为元素，则 div 内容存在另一个问题。它在 div 完全展开之前出现。

一些提示会很高兴

Answer 1

您是否尝试将 CSSheight 更改为 min-height？如果隐藏的div 大于最小高度，它仍然会扩展。应该可以解决您的问题。

Answer 2

Bootstrap collapse.js 可以在这里使用。

http://v4-alpha.getbootstrap.com/components/collapse/