具有崩溃效果的ngAnimate

Question

我正在尝试使用ngAnimate折叠进/出框.我做了类似的事情并且它有效,但我如何摆脱高度属性？拳击可用于扩展(文本中的文本),但随后文本将在边缘出现.

.myTest {
  transition: all linear 0.5s;
  height: 400px; /* I want to get rid this */
}
.ng-hide {
  height: 0;
}



<div class="content myTest" ng-show="show">
      <div class="row">
        <div class="col-md-15">
          <div class="text1">{{text1}}</div>
          <div class="analytic">{{analytic}}</div>
          <div class="text2">{{text2}}</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-15">
          <div class="label">{{'label'|translate}}</div>
          <div class="text3">{{text3}}</div>
        </div>
      </div>
    </div>

Answer 1

这个问题中也有很多方法回答了这个问题。scale如果不使用 javascript 测量内部内容的高度或使用 css （请参阅链接），则没有简单的方法可以使该动画每次都完美运行。

另外，为了确保容器折叠时隐藏文本，请务必overflow: hidden;在类中使用

一个使用 max-height 而不是 height 来围绕数据形成更紧密的框的基本示例：

.myTest {
  transition: all linear 0.5s;
  max-height: 400px; /* Set to something larger is expected */
  overflow: hidden;

}
.ng-hide {
  max-height: 0;
}