22

基本的に、「ハイライト」クラスは、クラス「エッジ」を持つ要素に、マウスエンターの JavaScript を介して動的に追加されます。ハイライト クラスは、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;
}

すべてのヘルプは非常に高く評価されています。前もって感謝します。

編集:トランジションが完了する前に、ユーザーがいくつかの異なるエッジで mouseenter/mouseleave できることに注意してください。ありがとう。

4

4 に答える 4

63

Jcubed が提案したように遅延を使用するか、タイミング関数step-endとを使用できますstep-start。秘訣は、2 つの異なるタイミング関数を使用することです: stepped forz-indexと linear foropacityおよびその他の連続プロパティです。

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/

于 2013-10-11T06:00:06.203 に答える
4

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

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

これは chrome で動作しますが、他のブラウザーで動作するかどうかはわかりません。

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

于 2012-05-14T20:19:57.797 に答える
1

各トランジションに 1 つずつ、2 つのクラスを使用できます (最初のクラスは色用、次に z-index 用)。以下は便宜上 jQuery を使用して作成されていることに注意してください。これは 1 つのエッジのみを対象としています。複数のエッジでこれを行うには、エッジごとに 1 つのタイマーを保存する必要があります。

次のマークアップがあるとします。

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

z-index は 1 秒後にのみ削除され、終了時にのみ適用されます。

ここで実際の動作を確認できます: http://jsfiddle.net/TptP8/

于 2012-05-14T22:34:44.430 に答える