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

Question

基本上,"highlight"类通过mouseenter上的javascript动态添加到具有"edge"类的元素.在mouseleave上删除了突出显示类.我想转换这些元素的边框颜色.但是,此"突出显示"类也会修改堆栈顺序.我希望在转换开始之前(在mouseenter上)在所有突出显示的边上设置z-index为1,并且我希望在转换完成后移除z-index为1(在mouseleave上).目前,在删除"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;
}

第一次尝试(显然延迟修复了一端的时间并将其混淆在另一端):

.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