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

Question

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

我试图在列表中上下移动 div，其中向上移动的 div 隐藏向下移动的 div。如果您查看 fiddle ，您会发现有 5 个不同颜色的框，您可以单击它们来告诉它们移到顶部。如果您单击不同位置的不同框，您将开始看到向上移动的框的 z-index 并不高于向下移动的框的 z-index。如果你反复点击第三个定位框，那对我来说就是一个高质量的复制器。

angular 指令 myWidget 通过在链式 addClass 和 removeClass 调用中添加/删除的类来应用索引。见下文和 fiddle 中的相反版本。

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，所以如果我使用不当或者有更好的模式可以解决我的问题，请随时告诉我。

谢谢!

Answer 1

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

看，您的转换代码会影响所有 属性:

.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