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;
}

它做的是

添加可扩展并稍微移动项目的类
使用js
使用js
删除添加了缩放的类

但这仅仅是为了效果而且它是使用变换完成的，这当然是不可取的，所以我要么需要清理＆＃34;清除＆＃34;转换完成后删除trasnsforms并实际移动DOM中的元素。或者完全不同。

orderBy＆amp; ng-move组合，但这需要ng-move发生一些ng-pre-move，ng-after-move事件，据我所知，事件并非如此。

或者至少如果你可以同时使用addClass: fn()和move: fn()，addClass会首先触发（当元素位于旧位置时），但你不能这样做这个（addClass在应用orderBy时不会触发）。

我能想到的最后一个选项，就像最少的一样，是在完成所有转换后从我的.animation()广播一些事件并将其捕获到控制器中，然后对数组进行排序，但我是d需要删除所有项目（删除项目）中的样式属性，这些项目可能会cause flickers {/ 3>}。

还有其他想法吗？

Answer 1

前移动显然是在https://github.com/angular/angular.js/issues/7609#issuecomment-44615566

进行的

目前，我所做的是应用ng-if，它强制角度重新渲染整个列表。工作正常。

Angular.js移动动画

1 个答案: