Question

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

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

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

Answer 1

You'll need to use animation yourself to show and hide the new content. It doesn't look like ngIf works well with material dialogs, but ngShow works fine:

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

I added CSS and modified your HTML. It seems that ngAnimate behaves a little different in material dialogs, so I had to add the transition on the main class and 2 extra classes that you don't normally use to the HTML:

CSS Addition:

.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 Change:

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

在显示或隐藏元素

1 个答案: