Css 显示或隐藏元素时，在MDR对话框上设置动态高度动画

我使用的是角度材质，我使用的是

md对话框中的选项卡。在选项卡中导航时，对话框高度会根据选项卡的内容进行平滑缩放。但是，当使用
ng if
显示或隐藏内容时，对话框高度会发生变化，但不会出现平滑动画。在显示和隐藏对话框中的元素时，是否有方法设置高度变化的动画

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

您需要自己使用动画来显示和隐藏新内容。它看起来不像
ngIf
可以很好地与材质对话框配合使用，但是
ngShow
可以很好地工作：


我添加了CSS并修改了你的HTML。ngAnimate在material对话框中的行为似乎有点不同，因此我不得不在主类和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。下面是一个关于此场景中可变高度的好例子，以及一个使用此解决方案的好例子。