1

I am using Angular Material and I am using tabs in an md-dialog. When navigating through the tabs the dialog height is scaling really smooth according to the content of the tab. However, when using an ng-if 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:

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

Chantal
  • 959
  • 2
  • 12
  • 24

1 Answers1

2

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">
Langdon
  • 19,875
  • 18
  • 88
  • 107
  • It works indeed but I hesitated a bit because the height is fixed to 60px in the example. Here is a great [post](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/8331169#8331169) about variable heights in this scenario and a [codepen](http://codepen.io/csteur/pen/adyQQo) using this solution. – Chantal Jan 14 '16 at 12:26