Palmi Palmi - 4 months ago 23
CSS Question

Slide effect with ngAnimate

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

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/

Comments