javascript - Angular.js 移动动画

Question

我很难创建一个相当简单的移动动画。

我要实现的效果类似这样http://jsbin.com/vorub/1/edit?output (这是我从其他一些 SO 问题中得到的)。

现在我设法使用 .animation() 做到了这一点

基本上是这样做的

.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);

                });

        }
}
}]);

在 move-to-top 类中执行此操作的地方

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

    position: relative;
    z-index: 999;
}

它的作用是

1. 添加缩放和向上移动元素的类
2. 使用js将元素移动到顶部
3. 使用 js 将所有先前的元素向下移动以腾出空间
4. 删除添加缩放的类

但这只是为了效果，它是使用转换完成的，这当然是不可取的，所以我要么需要在转换完成后“清理”并删除 trasnsforms 并实际移动 DOM 中的元素。或者完全不同。

理想情况下 orderBy 和 ng-move 组合，但这需要 ng-move 有一些 ng-pre -move、ng-after-move 事件，据我所知，它没有。

或者至少如果您可以同时使用 addClass: fn() 和 move: fn()，其中 addClass 将首先触发(而元素位于旧位置)，但您也不能这样做(应用 orderBy 时，addClass 不会触发)。

我能想到的最后一个选项，至少是，在所有转换完成后从我的 .animation() 广播一些事件并将其捕获到 Controller 中，然后对数组进行排序，但我需要从所有元素中删除样式属性(以删除元素)，这可能并且可能会 cause flickers .

还有其他想法吗？

Answer 1

预移动显然会在 1.3 中出现 https://github.com/angular/angular.js/issues/7609#issuecomment-44615566

现在，我所做的是应用 ng-if，它强制 angular 重新呈现整个列表。工作正常。