angularjs - ngHide and ngAnimate with max-width: transition property on the wrong class? -

i'm using nganimate animate max-height simple slide-toggle effect, , there's bit strange happening: when hiding, seems setting transition property on setup class (.xxx-hide) doesn't work--the height snaps 0 immediately:

.controls-hide {   -webkit-transition-duration: 1s;   -moz-transition-duration: 1s;   -o-transition-duration: 1s;   transition-duration: 1s;    max-height: 5em;   opacity: 1; }  .controls-hide.controls-hide-active {   max-height: 0em;   opacity: 0; } 

but setting on active class (.xxx-hide.xxx-hide-active), animation works fine:

.othercontrols-hide {   opacity: 1;   max-height: 5em; } .othercontrols-hide.othercontrols-hide-active {   -webkit-transition-duration: 1s;   -moz-transition-duration: 1s;   -o-transition-duration: 1s;   transition-duration: 1s;    max-height: 0em;   opacity: 0; } 

(here's whole fiddle.)

even more strangely, opacity animates fine in both cases. what's going on here?

i follow instructions @ site: http://www.nganimate.org/angularjs/ng-repeat/appear

and got fiddle working: http://jsfiddle.net/wxwsu/2/

what changed set transtion tag changes (transition: 1s linear all;), , set start properties @ main class:

.exercise-controls {     overflow: hidden;     border: 1px solid black;         height: 5em;     opacity: 1; }