web-dev-qa-db-ja.com

CSS3トランジション-z-indexプロパティのリセットを遅らせる方法は？

基本的に、「highlight」クラスは、mouseenterのjavascriptを介して動的にクラス「Edge」を持つ要素に追加されます。ハイライトクラスは、mouseleaveで削除されます。これらの要素の境界線の色を移行したいと思います。ただし、この「ハイライト」クラスはスタックの順序も変更します。遷移が始まる前に（mouseenterで）ハイライトされたすべてのエッジに1のz-indexを設定し、遷移が完了した後（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;
}

ありとあらゆる助けをいただければ幸いです。前もって感謝します。

編集：トランジションが完了する前に、ユーザーはいくつかの異なるエッジでマウス入力/マウスリーブできることに注意してください。ありがとう。

javascriptcssz-indexcss-transitions
20
Shane

Jcubedが提案したように、遅延を使用するか、タイミング関数step-endおよびstep-startを使用できます。秘訣は、2つの異なる タイミング関数 を使用することです。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/

56
z0r

使用する transition-delay。ホバー時に上昇するようにすることができますが、ホバー状態にあるときに要素に異なる遅延時間を割り当てることで、ホバーアウトに沈む前にしばらく待機します。

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

これはChromeで機能しますが、他のブラウザで機能するかどうかはわかりません。

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

4
John Stimac

2つのクラスを使用できます。1つは各遷移に使用します（最初のクラスは色に使用し、次にz-indexに使用します）。以下は便宜上jQueryを使用して作成されたものであり、1つのエッジのみを対象としていることに注意してください。複数のエッジに対してこれを行うには、エッジごとに1つのタイマーを格納する必要があります。

次のマークアップが与えられます：

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

（私はそれを示すために、2番目の遷移に少し色の変更を追加しました）。

そして次の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/

1
Py.