angularjs - How do I use ng-animate in ng-repeat to shrink items on leave? -

i trying use new ng-animate directive, , struggling desired effect when used ng-repeat. trying make items grow when entering, , shrink when leaving. far enter working, shrink animation fails.

i have set fiddle here can see issue:-

http://jsfiddle.net/rpk98c/6t42m/1/

the relevant html is:-

<ul>     <li ng-animate="{enter: 'repeat-enter',                     leave: 'repeat-leave',                     move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li> </ul> 

and relevant css:-

.repeat-enter-setup, .repeat-leave-setup, .repeat-move-setup { -webkit-transition:all linear 1s; -moz-transition:all linear 1s; -ms-transition:all linear 1s; -o-transition:all linear 1s; transition:all linear 1s; }  .repeat-enter-setup {     max-height: 0;     opacity:0; } .repeat-enter-setup.repeat-enter-start {     max-height: 250px;     opacity:1; } .repeat-leave-setup {     opacity:1;     max-height: 250px; } .repeat-leave-setup.repeat-leave-start {     opacity:0;     max-height: 0; } 

anyone know i've gone wrong?

thanks,

ryan

ps noticed in ie 10 no animations work! i'm testing in chrome now

you need switch first line of css affect "start" classes instead of setup ones. know, that's not how examples work. make it:

.repeat-enter-start, .repeat-leave-start, .repeat-move-start {   -webkit-transition:all linear 1s;   -moz-transition:all linear 1s;   -ms-transition:all linear 1s;   -o-transition:all linear 1s;   transition:all linear 1s; } 

this helps because trying animate property element not possess. elements not have max-height property set @ all. when apply max-height @ same time transition it animate fact added property! before "start" class applied means setup stage not finished (since animation takes 1 second) before start stage supposed begin. when apply "leave" animation following steps happen.

1. you element starts without max-height.
2. the "leave-setup" class applied , gives max-height , transition.
3. because max-height "changed" (from not existing existing) , have transition browser start animate max-height default starting value (0 seems) chosen value of 250px, element shrinks 0 , starts animating up!
4. now "leave-start" class applied, step 3 not done yet! max-height still 0, or close to, since still busy animating inserting of property, animation stops , goes 0 again , never see anything.

but if move transition property "setup"-step "start"-step, in css above, step 3 instant since has no transition. transition appears first @ step 4. have:

1. you element starts without max-height.
2. the "leave-setup" class applied , gives max-height but not transition.
3. we have no transition max height instantly changed 250px.
4. now "leave-start" class applied, , since step 3 finished time around max-height 250px , can animate away without issues.

you don't have problem opacity since animating default value of 1, there no animation in way in step 3. seems enter events handled bit differently since more animate non-default value, not see behavior on ever events.

edit:

i experimented bit more , turns out answer not work firefox (at least not on ff windows). first of ff seems straight fail if animate non existing property, need make sure elements have max-height start, like:

li {     max-height: 250px; } 

this fixes leave me, reason no enter animation @ work in firefox on windows. still trying figure 1 out.