Animating adding/removing items with ng-repeat

I want to slide-up/slide-down items in a <UL> as they are added and removed.

I've followed the angular docs here, and am trying to use a simple js-hook based (rather than css-hook based) solution, that uses this 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, that doesn't work on the slide up, only on the slide down. I've recreated as a plunkr here:

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

Any ideas?

Answers


slideDown works for hidden item and slideUp just opposite of it.

So before slideDown you have to hide first

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

Check the updated plunker


Need Your Help

Unknown column type "int" requested

symfony doctrine-orm

i am back with another symfony problem.

Unit Testing functions within repository interfaces - ASP.net MVC3 & Moq

asp.net-mvc-3 unit-testing testing moq

I'm getting into writing unit testing and have implemented a nice repository pattern/moq to allow me to test my functions without using "real" data. So far so good.. However..