Javascript CSS3转换-如何延迟z索引属性的重置？

基本上，一个“highlight”类通过mouseenter上的javascript动态地添加到具有类“edge”的元素中。高亮显示类将在mouseleave上删除。我想转换这些元素的边框颜色。但是，这个“highlight”类还修改堆栈顺序。我希望在过渡开始之前（在mouseenter上）在所有高亮显示的边上设置z索引1，并希望在过渡完成后（在mouseleave上）删除z索引1。当前，删除“highlight”类后，z-index属性将立即重置

基本设置：

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

第一次尝试（显然，延迟修复了一端的计时，并在另一端将其弄糟）：

非常感谢您的任何帮助。提前谢谢

---

编辑：请记住，在完成过渡之前，用户可以在多个不同的边缘上进行鼠标插入/鼠标删除。谢谢。

使用

转换延迟

。通过在元素处于悬停状态时为其指定不同的延迟时间，可以使其在悬停时上升，但在悬停时下沉之前等待一段时间

例如：

这可以在chrome中使用，但不确定它是否可以在其他浏览器中使用

---

您可以使用两个类，每个转换一个（第一个用于颜色，然后用于z索引）。 请注意，以下使用jQuery是为了方便起见，并且只针对一条边。要对多个边缘执行此操作，您需要为每个边缘存储一个计时器

给定以下标记：

​<div class="edge"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

（我在第二个过渡上添加了一点颜色变化，只是为了显示它）

以及以下文件：

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");
});

它将仅在1秒后删除z索引，并且仅适用于出口

---

您可以在这里看到它的作用：

您可以使用Jcubed建议的延迟，或者使用计时功能

步结束

和

步开始

。诀窍是使用两种不同的属性：阶跃属性用于

z-index

，线性属性用于

opacity

和其他连续属性

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

---

示例：

如果您在使用@z0r中的z索引转换解决方案时遇到问题，您可以通过动画来推迟z索引的更改，但在Safari中转换对我更有效

.hasDelayedZIndex {
  animation: setZIndexWithDelay 0.01s 1s forwards;      
}

@keyframes setZIndexWithDelay {
  to {
    z-index: 1;
  }
}

---

我根据我的特殊情况修改了你的例子。很近，但没有雪茄。问题在于存在重叠边，并且可能同时运行多个不同的过渡。只要用户不在重叠边上层叠过渡，您的技术就可以工作（即，在重叠边上开始另一个mouseenter过渡之前，等待Mouseleve过渡完成）。谢谢你。几乎！我会投票支持你的答案，因为它仍然有用，但我没有代表。优雅的解决方案，不需要一堆JS和添加多个类。美好的他们说，

转换延迟

在ie10+中起作用，与flexbox一样美观、优雅。这是同样的提琴，但使用的是

转换延迟

：

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

.hasDelayedZIndex {
  animation: setZIndexWithDelay 0.01s 1s forwards;      
}

@keyframes setZIndexWithDelay {
  to {
    z-index: 1;
  }
}