how to set a dynamic height for ng-hide and ng-show animations

Question

I am trying to show a div with animation using ng-hide and ng-show, it is not working properly. When I mention a specific height it is working correctly, if I mention min-height it is not working.

here is my css code

.sample-show-hide {
  opacity: 1;
  min-height: 180px;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.sample-show-hide.ng-hide {
  min-height: 0px;
  opacity: 0;
}

here is my example html code

<div class="row" ng-click="showDiv=true">
<h2>Click me</h2>
</div>

<div class="row sample-show-hide" ng-show="showDiv=!showDiv">
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
</div>

If I mention a specific height like below it is working correctly, then if I add some more extra data to that div then it is taking the height as 80px only the remaining data is not showing because of that specific height, so if I add extra text also that div has to take height automatically

.sample-show-hide {
      opacity: 1;
      height: 80px;
    }

    .sample-show-hide.ng-hide-add,
    .sample-show-hide.ng-hide-remove {
      transition: all linear 0.5s;
    }

    .sample-show-hide.ng-hide {
      height: 0px;
      opacity: 0;
    }

Answer 1

So, I managed to obtain what I think you want, except that the size transition is not necessarily in sync with the opacity transition, but looks good either way.

The idea is to use max-width and the ease-in and ease-out transitions.

.sample-show-hide {
  max-height: 999px;
  opacity: 1;
}

.sample-show-hide.ng-hide-add {
  transition: all ease-out 0.5s;
}

.sample-show-hide.ng-hide-remove {
  transition: all ease-in 0.5s;
}

.sample-show-hide.ng-hide {
  max-height: 0px;
  opacity: 0;
}

NOTE that the speed of the size depends on the max-height that you set (e.g. 999px) - you can increase this if you expect the div to have bigger size but then also increase the transition time (you could separate the opacity transition from the size transition to make them more compatible)

Hope this helps.

Answer 2

Seems to work fine, I made a jsfiddle for it just in case. I added one extra line though, to be sure.

min-height: 80px;
height: auto;

Answer 3

It works in my example https://jsfiddle.net/c6xnv0pj/2/, maybe I'm missing something?

Maybe you didn't inject ngAnimate to your app?

angular.module('myApp', ['ngAnimate']);