Angular-animate with height: auto; doesn't work

Issue

I want to make animation using angular-animate. My css rules is:

.expanded {
    transition: all ease 0.5s;
    overflow: hidden;
}
.expanded.ng-hide {
    height: 0px;
}

If I add, for example, height: 100px to .expanded class, then everything works fine. But how to make it works without height definition? I need this, because the content of .expanded container might be different.

Solution

It's not possible to animate height to 'auto' in CSS (neither in angularJS). You can try to play with max-height instead. There are some impacts of that, but at least you can try. So animate not height from 0 to auto, but max-height. You can set max-height a much bigger than the height you need and that would work.

#container {
  max-height: 0;
  height: 100px;
  background: red;
  transition: max-height .3s ease-in;
}

#container:hover {
  max-height: 500px;  
}

<div id="container">
  Hover me
</div>

Answered By - kirill.buga