请在此处查看显示我问题的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