steur36 steur36 - 1 year ago 371
AngularJS Question

Animate dynamic height on a mdDialog when showing or hiding elements

I am using Angular Material and I am using tabs in an

. When navigating through the tabs the dialog height is scaling really smooth according to the content of the tab. However, when using an
to show or hide content, the dialog height changes but there is no smooth animation. Is there a way to animate the change in height when showing and hiding elements inside dialog?

This is a codepen of the tabs with a checkbox for adding content:

Answer Source

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:

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;
}, {
  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">