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

Question

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

这是带有用于添加内容的复选框的选项卡代码笔：

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

Answer 1

您需要自己使用动画来显示和隐藏新内容。看起来 ngIf 在 material 对话框中效果不佳，但 ngShow 效果很好：

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

我添加了CSS并修改了你的HTML。看起来 ngAnimate 在 material 对话框中的行为有点不同，所以我不得不在主 class 和 2 个你通常不使用的额外 classes 添加过渡到 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">

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

Animate dynamic height on a mdDialog when showing or hiding elements

css

angularjs

angular-material