angularjs - Animating adding/removing items with ng-repeat -

i want slide-up/slide-down items in <ul> added , removed.

i've followed angular docs here, , trying use simple js-hook based (rather css-hook based) solution, uses angular animation:

app.animation('.slide', function () {     return {         enter: function (element, done) {           console.log('enter');             element.slidedown(200, done);         },         move: function(element, done) {             console.log('move');             element.slideup(200, done);         },         leave: function(element, done) {             console.log('leave');             element.slideup(200, done);         }     }; }); 

but, doesn't work on slide up, on slide down. i've recreated plunkr here:

http://plnkr.co/edit/9x0apgxkbqmbkbqmmy6z?p=preview

any ideas?

slidedown works hidden item , slideup opposite of it.

so before slidedown have hide first

element.hide().slidedown(200, done); 

check updated plunker