Slide effect with ngAnimate - html

Question

I try to get a slide effect with angular and ngAnimate.
I works nicely as a fade-in/fade-out effect with opacity.
.show-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
opacity: 1;
}
.show-animation.ng-hide {
opacity: 0;
}
See example: https://jsfiddle.net/1bnpqpy8/10/
But when I try to use the max-height attribute for a slide effect it does not work anymore.
.show-animation {
-webkit-transition: 1s all linear;
transition:all linear 1s;
max-height: 25px;
}
.show-animation.ng-hide {
max-height: 0;
}
See example: https://jsfiddle.net/1bnpqpy8/11/
Why does ngAnimate not work with max-height?
What do I do wrong?

Answer 1

You are missing an important css property: overflow.
overflow tells a div what to do if the contents are greater than height (or max-height). The default value is visible and since one of your inner divs has a set height (timelineVoid set to 20px), this will force the div to be visible.
You need overflow (specifically overflow-y) set to hidden in your show-anomation div to allow content to be hidden:
overflow-y: hidden;
here is the fiddle: https://jsfiddle.net/5mr8azvn/