Angular.js移动动画

Question

I'm having hard time creating a rather simple move animation.

The effect I want to achieve is similar to this http://jsbin.com/vorub/1/edit?output (which I took from some other SO question).

Now I managed to do it using .animation()

Basically doing this

.animation('.move-to-top', [function() {
    return {
        addClass: function(element, className, done) {

            var el = $(element);
            var top = el.position().top;

            el
                .addClass('move-to-top')
                .one('transitionend', function() {

                    setTimeout(function() {
                        el.css({
                            transform: 'scale(1.03) translateY(-' + (top+10) + 'px)'
                        })
                        .one('transitionend', function() {
                            setTimeout(function() {
                                el
                                    .removeClass('move-to-top')
                                    .css({
                                        transform: 'scale(1) translateY(-' + (top) + 'px)'
                                    })
                            }, 50);


                            el.prevAll('.timetracking-item')
                                .css({
                                    transform: 'translateY(' + el.height() + 'px)'
                                });

                        });

                    }, 100);

                });

        }
}
}]);

where move-to-top class does this

.move-to-top {
    @include vendor(transition, all 400ms ease-in-out);
    @include vendor(transform, scale(1.03) translateY(-10px));

    position: relative;
    z-index: 999;
}

What it does is

1. add class which scales and move item up a bit
2. move the item to the top using js
3. move all previous elements that down to make space using js
4. remove class that added scaling

BUT that's just for the effect and it's done using transforms, which is of course undesirable, so I'd either need to "cleanup" after the transitions are done and remove trasnsforms and actually move the elements in DOM. Or do it completely differently.

Ideal would by orderBy & ng-move combo, but that would require ng-move to have some ng-pre-move , ng-after-move events, which it as far as I know, doesn't.

Or at least if you could use both addClass: fn() and move: fn() where addClass would fire first(while the element is on the old position), but you can't do this either( addClass doesn't fire when orderBy is applied).

The last option I can think about, and like the least, is broadcast some event from my .animation() after all the transitions are done and catch it inside controller, and sort the array then, but I'd need to remove the style attribute from all the items(to remove items) which could and probably will cause flickers .

Any other ideas?

Answer 1

The pre-move is apparently comming in 1.3 https://github.com/angular/angular.js/issues/7609#issuecomment-44615566

For now, what I've done was apply ng-if, which forces angular to re-render the whole list. Works fine.