【发布时间】：2014-07-18 19:43:45
【问题描述】：
我很难创建一个相当简单的移动动画。
我想要达到的效果类似于这个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将item移到顶部
- 使用 js 将之前的所有元素向下移动以腾出空间
- 删除添加缩放的类
但这只是为了效果，它是使用转换完成的，这当然是不可取的，所以我需要在转换完成后“清理”并删除转换并实际移动 DOM 中的元素。或者完全不同。
理想的情况是orderBy 和ng-move 组合，但这需要ng-move 有一些ng-pre-move、ng-after-move 事件，据我所知，没有。
或者至少如果你可以同时使用addClass: fn() 和move: fn()，其中addClass 将首先触发（当元素位于旧位置时），但你也不能这样做（addClass 不会'应用orderBy 时触发）。
我能想到的最后一个选项，也是最起码的，是在所有转换完成后从我的.animation() 广播一些事件并在控制器中捕获它，然后对数组进行排序，但我需要删除所有项目的样式属性（删除项目），可能会而且可能会cause flickers。
还有其他想法吗？
【问题讨论】：
标签： javascript angularjs css animation ng-animate