AngularJS - 不尊重 Z-Index 更改上下滑动 Divs

Question

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

我正在尝试在列表中上下移动 div，这些 div 向上移动隐藏 div 向下移动。如果您查看小提琴，您可以单击 5 个不同颜色的框来告诉它们移动到顶部。如果单击不同位置的各种框，您将开始看到向上移动的框的 z-index 不高于向下移动的框的 z-index。如果您反复单击第三个定位框，那对我来说就是一个高质量的复制器。

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

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

我原以为这意味着浏览器将在移动到第二个之前完成第一个链式调用（依此类推）。但是在这种情况下，它似乎没有这样做。

同样在下面的指令 / 中，您将找到一个有效的解决方案，使用 $timeout 来延迟对触发转换的 css 顶部值的更改。它已被注释掉，但有 cmets 显示如何在需要更改的两个点代码中切换到解决方案。然而，这感觉像是作弊/不是正确的方法。因此这里的问题。

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

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

谢谢！

Answer 1

你是对的，有更好的方法。

看，您的转换代码会影响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