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
Post a Comment