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

Question

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

[拜托，运行 jsfiddle 中的示例，Whosebug 的代码没有运行]

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>

如您所见，没有显式高度的动画不适用于此属性。解决这个问题的可能方法是什么。可能有一些图书馆或 link 会帮助我。
如果直接给元素设置高度，还有一个问题是div内容。在 div 完全展开之前比较合适。

一些提示会很高兴

Answer 1

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

Answer 2

这里可以用

Bootstrapcollapse.js

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

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

Animation. Expand div hight without setting directli it's height (angular app)

javascript

css

animation

transition

angularjs