12

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.

splash27
  • 2,057
  • 6
  • 26
  • 49
  • 4
    This is absolutely not a duplicate as there is a valid angular only answer below. Please if you use angular read the second answer. – Leogout Dec 15 '20 at 13:11

3 Answers3

77

use * as auto,

example :

state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),

Documentation

Tomek
  • 502
  • 6
  • 14
Inderjeet
  • 1,488
  • 2
  • 17
  • 30
  • 8
    @Inderjeet How to find documentation about it? – user2146414 Nov 06 '19 at 19:08
  • 1
    Important to mention that '*' will provide the previous or original value for the property, so if the style height is initially set as 0px in the class of the target element this will just set 'height: 0px'. – Emanuel Silva Jun 08 '23 at 15:53
0

kirill.buga's post helped me out so after reading this post and some others I made some modification to kirill.buga's post. I got rid of the container height since it was supposed to be auto, slowed down the transition and then hid the overflow so that when the div collapsed, the content inside the div would no longer be visible. 

#container {
  max-height: 20px;
  background: red;
  overflow:hidden;
  transition: max-height 2s ease-in;
}

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

plunker example

Fractal
  • 1,748
  • 5
  • 26
  • 46
-1

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>
kirill.buga
  • 1,129
  • 2
  • 12
  • 26