0

According to this answer we can animate max-height property, however for some reason an animation isn't applied to max-height property specified like this (see plunker):

.animated-div {
  overflow: hidden;
  background: lightblue;
  opacity:1;
  height:500px;
}

.animated-div.ng-hide-add.ng-hide-add-active,
.animated-div.ng-hide-remove.ng-hide-remove-active {
  transition:all linear 0.5s;
}

.animated-div.ng-hide {
  height:0;
  opacity:0;
}

Yet if I change max-height to height it works well. What's the problem?

Community
  • 1
  • 1
Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

1 Answers1

0

It all works fine but your example isn't setup properly to demonstrate the effect. The animated-div is just not high enough to see the effect, before max-height kicks in, opacity is already so low you can't see the effect anymore.

See my updated fork for a demonstration (I added more text, deleted the opacity change and made the transition in two seconds for demonstration purposes; and the transition works on hover to see the effect multiple times without restarting/reloading).

Paul
  • 8,974
  • 3
  • 28
  • 48
  • I had `overflow:hidden` in place, you must've overlooked it. When I added more text it then became obvious that the solution worked. Thanks) – Max Koretskyi Oct 27 '14 at 09:37
  • Sorry, my bad. I indeed didn't notice the line. Still, the `animated-div` wasn't large enough to see the change in max-height before the opacity was too low to see it. Changed my answer regarding the overflow part. – Paul Oct 27 '14 at 09:41