Javascript AngularJS-幻灯片上下俯冲，Z索引变化不受重视

请参阅此处的JSFIDLE，它显示了我的问题：

我尝试在列表中上下移动div，这些div向上移动，隐藏div向下移动。如果你看小提琴，有5个不同颜色的盒子，你可以点击告诉他们移动到顶部。如果单击不同位置的各个框，您将开始看到向上移动的框的z索引不会高于向下移动的框的z索引。如果你反复点击第三个定位框，这对我来说是一个高质量的复制品

angular指令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，所以如果我使用的东西不正确或者有更好的模式可以解决我的问题，请随时告诉我

---

谢谢

你说得对，有更好的方法

请参见，转换代码会影响所有属性：

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

---

在这里，我更新了你的

当你说有更好的方法做这件事时，你是指css还是你认为应该有一个整体的结构变化？不过，转换所有属性完全有道理。谢谢@mlippy我只是同意你的看法，javascript解决方案似乎不是正确的方法^^