请在此处查看显示我问题的JSFiddle:http://jsfiddle.net/mlippy/zkH7S/

我正在尝试将div向上和向下移动,使那些div向上移动,隐藏div向下移动。如果您看小提琴,可以单击5个不同的彩色框,让它们移到顶部。如果单击各个位置的各个框,则会开始看到向上移动的框的z索引不会比向下移动的框的z索引高。如果您重复单击第3个定位框,那对我来说是高质量的复制品。

角度指令myWidget通过在链接的addClass和removeClass调用中添加/删除的类来应用索引。参见下面,小提琴中的相反版本。

element.removeClass('moveDown').addClass('moveUp').css('top', (newValue * 45) + 'px');


我以为这意味着浏览器将先完成第一个链接调用,然后再转到第二个(依此类推)。但是,在这种情况下,似乎没有这样做。

同样在下面的指令/中,您将找到使用$ timeout的有效解决方案,以延迟对触发转换的css top值的更改。它已经被注释掉了,但是有注释显示了如何更改两个位置代码中的解决方案。感觉就像是作弊/不是正确的作法。因此,这里的问题。

element.removeClass('moveDown').addClass('moveUp');
$timeout(function() {
    element.css('top', (newValue * 45) + 'px');
}, 350);


这是我第一次使用AngularJS,因此,如果我使用的方式不正确,或者有更好的模式可以解决我的问题,请随时告诉我。

谢谢!

最佳答案

没错,有更好的方法。

看,您的过渡代码会影响all属性:

.widget.moveUp {
    z-index: 100!important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.widget.moveDown {
    z-index: 1!important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}


所以我的猜测是,您过渡到z-index也会花费1秒的时间。

猜测到这一点,我可以自由更改这些代码行,以仅针对top属性进行转换,这是唯一会影响您的情况的属性。

.widget {
    width: 100%;
    height: 40px;
    position: absolute;
    clear: both;
    z-index: 1;
    -webkit-transition: top 1s ease-in-out 0s;
    -moz-transition: top 1s ease-in-out 0s;
    transition: top 1s ease-in-out 0s;
}
.widget.moveUp {
    z-index: 100!important;
}
.widget.moveDown {
    z-index: 1!important;
}


在这里,我更新了您的FIDDLE

10-05 20:52
查看更多