css - why isn't animation working for max-height? -



css - why isn't animation working for max-height? -

according this answer can animate max-height property, reason animation isn't applied max-height property specified (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 alter max-height height works well. what's problem?

it works fine illustration isn't setup demonstrate effect. animated-div not high plenty see effect, before max-height kicks in, opacity low can't see effect anymore.

see updated fork demonstration (i added more text, deleted opacity alter , made transition in 2 seconds demonstration purposes; , transition works on hover see effect multiple times without restarting/reloading).

css angularjs animation

Comments

Popular posts from this blog

c - Compilation of a code: unkown type name string -

java - Bypassing "final local variable defined in an enclosing type" -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -