CODEWITHSUNDEEP
javascriptcssangularjs
splash27
splash27

Reputation: 2107

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

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.

Upvotes: 12

Views: 14928

Answers (3)

Inderjeet
Inderjeet

Reputation: 1528

use * as auto,

example :

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

Documentation

Upvotes: 77

Fractal
Fractal

Reputation: 1917

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

Upvotes: 0

kirill.buga
kirill.buga

Reputation: 1159

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>

Upvotes: -1

Related Questions