javascript CSS3 Transitions - 如何延迟 z-index 属性的重置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10587842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transitions - How to delay reset of the z-index property?
提问by Shane
Basically, a "highlight" class is added to elements with class "edge" dynamically through javascript on mouseenter. The highlight class is removed on mouseleave. I want to transition the border-color of these elements. However, this "highlight" class also modifies the stack order. I want a z-index of 1 to be set on all highlighted edges before the transition begins (on mouseenter) and I want the z-index of 1 to be removed after the transition completes (on mouseleave). Currently the z-index property is reset immediately after the "highlight" class is removed.
基本上，通过 mouseenter 上的 javascript 动态地将“highlight”类添加到类“edge”的元素中。高亮类在 mouseleave 上被删除。我想转换这些元素的边框颜色。然而，这个“highlight”类也会修改堆栈顺序。我希望在转换开始之前（在 mouseenter 上）在所有突出显示的边缘上设置 z-index 为 1，并且我希望在转换完成后（在 mouseleave 上）删除 1 的 z-index。当前 z-index 属性在“highlight”类被移除后会立即重置。
Basic set up:
基本设置：
.edge {
border-color: hsl(0, 0%, 40%);
border-style: solid;
border-width: (set appropriately in another selector);
transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-property: border-color;
-moz-transition-property: border-color;
-o-transition-property: border-color;
-webkit-transition-property: border-color;
}
.edge.highlight {
border-color: hsl(0, 0%, 85%);
z-index: 1;
}
First attempt (obviously the delay fixes the timing on one end and messes it up on the other):
第一次尝试（显然延迟修复了一端的时间并在另一端搞砸了）：
.edge {
border-color: hsl(0, 0%, 40%);
border-style: solid;
border-width: (set appropriately in another selector);
transition-duration: 1s, 0;
-moz-transition-duration: 1s, 0;
-o-transition-duration: 1s, 0;
-webkit-transition-duration: 1s, 0;
transition-delay: 0, 1s;
-moz-transition-delay: 0, 1s;
-o-transition-delay: 0, 1s;
-webkit-transition-delay: 0, 1s;
transition-property: border-color, z-index;
-moz-transition-property: border-color, z-index;
-o-transition-property: border-color, z-index;
-webkit-transition-property: border-color, z-index;
}
Any and all help is very much appreciated. Thanks in advance.
非常感谢任何和所有帮助。提前致谢。
edit:Please keep in mind that the user can mouseenter/mouseleave on several different edges before the transitions have a chance to complete. Thanks.
编辑：请记住，在转换有机会完成之前，用户可以在几个不同的边缘上使用鼠标进入/鼠标离开。谢谢。
回答by z0r
You can use a delay, as Jcubed suggested, or the timing functions step-endand step-start. The trick is to use two different timing functions: stepped for z-index, and linear for opacityand other continuous properties.
您可以按照 Jcubed 的建议使用延迟，或者使用计时功能step-end和step-start. 诀窍是使用两种不同的计时函数：stepped for z-index，以及linear foropacity和其他连续属性。
edge {
z-index: -1;
opacity: 0;
transition: z-index 0.5s step-end, opacity 0.5s linear;
}
edge.highlight {
z-index: 1;
opacity: 1;
transition: z-index 0.5s step-start, opacity 0.5s linear;
}
Example: http://jsfiddle.net/cehHh/8/
回答by John Stimac
Use transition-delay. You can make it so it rises on hover but waits a while before sinking on hover out by assigning a different delay time to the element when it is in its hover state.
使用transition-delay. 您可以通过为处于悬停状态的元素分配不同的延迟时间，使其在悬停时上升，但在悬停时下沉之前等待一段时间。
Example: http://jsfiddle.net/vQqzK/1/
示例：http: //jsfiddle.net/vQqzK/1/
This works in chrome, not sure if it will work in other browsers.
这适用于 chrome，不确定它是否适用于其他浏览器。
回答by Py.
You could use two classes, one for each transition (the first one for the color, then for the z-index). Note that the following is made using jQuery for convenience, and it's only for one edge. To do so for multiple edge, you'd need to store one timer per edge.
您可以使用两个类，一个用于每个过渡（第一个用于颜色，然后用于 z-index）。请注意，为方便起见，以下内容是使用 jQuery 制作的，并且仅适用于一侧。要为多个边缘这样做，您需要为每个边缘存储一个计时器。
Given the following markup:
鉴于以下标记：
?<div class="edge"></div>??????????????????????????????????????
CSS:
CSS：
.edge {
width:40px;
height:40px;
border-color: hsl(0, 0%, 40%);
border-style: solid;
border-width: (set appropriately in another selector);
transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-property: border-color;
-moz-transition-property: border-color;
-o-transition-property: border-color;
-webkit-transition-property: border-color;
}
.edge.highlight {
border-color: hsl(0, 0%, 85%);
z-index: 1;
}
.edge.endHl{
border-color: hsl(0, 0%, 65%);
z-index: 1;
}
(I added a little color change on the second transition just to show it).
（我在第二个过渡上添加了一点颜色变化只是为了显示它）。
And the following JS:
以及以下JS：
var myTime = null;
function resetTime() {
if (myTime !== null) {
clearTimeout(myTime);
myTime = null;
}
}
$(".edge").mouseenter(function() {
resetTime();
$(this).addClass("highlight");
$(this).removeClass("endHl");
});
$(".edge").mouseleave(function() {
resetTime();
myTime = setTimeout(function() {
$(".edge").removeClass("endHl");
},1000);
$(this).removeClass("highlight");
$(this).addClass("endHl");
});
It will remove the z-index only after 1 sec, and will apply only on the exit.
它将仅在 1 秒后删除 z-index，并且仅适用于出口。
You can see it in action here: http://jsfiddle.net/TptP8/
你可以在这里看到它的实际效果：http: //jsfiddle.net/TptP8/
