CSS3 Transitions - 如何延迟 z-index 属性的重置？

Question

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

基本设置：

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

第一次尝试（显然延迟固定了一端的时间并在另一端搞砸了）：

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

非常感谢任何和所有帮助。 提前致谢。

编辑：请记住，在转换有机会完成之前，用户可以在几个不同的边缘上使用鼠标进入/鼠标离开。 谢谢。

Answer 1

您可以按照 Jcubed 的建议使用延迟，或者使用计时函数step-end和step-start 。 诀窍是使用两种不同的计时函数： 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;
}

示例： http : //jsfiddle.net/cehHh/8/

Answer 2

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

示例： http : //jsfiddle.net/vQqzK/1/

这适用于 chrome，不确定它是否适用于其他浏览器。

https://developer.mozilla.org/en/CSS/transition-delay

Answer 3

您可以使用两个类，一个用于每个过渡（第一个用于颜色，然后用于 z-index）。 请注意，为方便起见，以下内容是使用 jQuery 制作的，并且仅适用于一侧。 要为多个边缘这样做，您需要为每个边缘存储一个计时器。

鉴于以下标记：

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

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

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

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

它将仅在 1 秒后删除 z-index，并且仅适用于出口。

你可以在这里看到它的实际效果： http : //jsfiddle.net/TptP8/

Answer 4

如果您在使用 @z0r 的 z-index 过渡解决方案时遇到问题 - 您可以通过动画推迟 z-index 更改作为替代方案，但过渡在 Safari 中对我来说效果更好

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

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