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