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

user_1818628 0
Viewed 10857

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.

angularjs css javascript
3 Answers

use * as auto,

example :

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