AngularJS - 随着 Z 索引的变化上下滑动 Div 没有得到尊重 [英] AngularJS - Slide Divs Up And Down With Z-Index Changes Isn't Being Respected

问题描述

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

Please see the JSFiddle here which shows my issue: http://jsfiddle.net/mlippy/zkH7S/

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

I'm attempting to shuffle divs up and down a list with those divs moving up hiding the divs moving down. If you look at the fiddle, there are 5 different colored boxes that you can click to tell them to move to the top. If you click various boxes in various positions, you'll start to see the z-index of the boxes moving up not be higher than that of the boxes moving down. If you click the 3rd positioned box repeatedly, that's been a quality reproducer for me.

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

The angular directive myWidget is applying the indexes through classes which are being added / removed in chained addClass and removeClass calls. See below and the opposite version in the fiddle.

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

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

I had thought that this meant the browser was going to complete the first chained call before moving onto the second (and so on). However in this case it doesn't appear to be doing so.

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

Also in the directive / below, you'll find a working solution using $timeout to delay the change to the css top value which triggers the transition. It's been commented out, but there are comments showing how to toggle to the solution in the two spots code needs to be changed. This feels like cheating / not the correct way for it to be done however. Hence the question here.

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

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

This is my first time using AngularJS, so feel free to let me know if I'm using things incorrectly or there's a better pattern which would fix my issue.

谢谢！

推荐答案

你说得对，有更好的方法.

You're right, there is a better way to do it.

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

See, your code for transition affects all properties:

.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 秒的时间.

So my guess is that your transition to z-index is also taking 1 second to happen.

猜测，我冒昧地更改了这些代码行，以仅针对 top 属性进行转换，这是唯一应该影响您的情况的属性.

Guessing that, I've took the liberty to change these lines of code to target a transition only on the top property, which is the only one that should be affect in your case.

.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

Here, I updated your FIDDLE

这篇关于AngularJS - 随着 Z 索引的变化上下滑动 Div 没有得到尊重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！