steur36 steur36 - 6 months ago 161
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

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

Answer

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">
Comments