显示或隐藏元素时在 mdDialog 上设置动态高度答案

【问题标题】：Animate dynamic height on a mdDialog when showing or hiding elements显示或隐藏元素时在 mdDialog 上设置动态高度
【发布时间】：2016-01-29 17:25:23
【问题描述】：

我正在使用 Angular Material 并且我正在使用 md-dialog 中的选项卡。浏览选项卡时，对话框高度根据选项卡的内容缩放非常平滑。但是，当使用ng-if 显示或隐藏内容时，对话框高度会发生变化，但没有流畅的动画。在对话框内显示和隐藏元素时，有没有办法为高度变化设置动画？

这是标签的代码笔，带有用于添加内容的复选框：

http://codepen.io/csteur/pen/zvjgRr?editors=101

【问题讨论】：

标签： css angularjs angular-material

【解决方案1】：

您需要自己使用动画来显示和隐藏新内容。看起来 ngIf 不适用于材质对话框，但 ngShow 可以正常工作：

http://codepen.io/anon/pen/zvaYEy

我添加了 CSS 并修改了您的 HTML。似乎 ngAnimate 在材质对话框中的行为有点不同，所以我不得不在主类和 2 个您通常不使用的额外类上添加过渡到 HTML：

CSS 加法：

.animate-show {
  height: 0;
  background: white;
  overflow: hidden;
  transition: all 0.5s;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
  transition: all 0.5s;
}

.animate-show:not(.ng-hide) {
  height: 60px;
}

HTML 更改：

<p ng-show="addText" class="animate-show ng-hide ng-hide-animate">

【讨论】：

它确实有效，但我有点犹豫，因为在示例中高度固定为 60px。这是一个很棒的post，关于这种情况下的可变高度，还有一个codepen使用这个解决方案。