Переходы CSS3 - Как задержать reset свойства z-index?

В принципе, класс "highlight" добавляется к элементам с "edge" класса динамически через javascript на mouseenter. Класс выделения удаляется на мышином фоне. Я хочу перейти к пограничному цвету этих элементов. Однако этот класс "highlight" также изменяет порядок стека. Я хочу, чтобы z-индекс 1 был установлен на всех выделенных ребрах до начала перехода (по мышиному центру), и я хочу, чтобы z-индекс 1 был удален после завершения перехода (на мышином). В настоящее время свойство z-index reset сразу после удаления класса "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 на нескольких разных краях, прежде чем переходы смогут завершить. Спасибо.

Ответ 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/

Ответ 2

Используйте transition-delay. Вы можете сделать это так, чтобы он повышался при наведении, но ждет некоторое время, прежде чем погрузиться при наведении курсора, назначив другое время задержки элементу, когда он находится в состоянии зависания.

Пример: http://jsfiddle.net/vQqzK/1/

Это работает в chrome, не уверен, что он будет работать в других браузерах.

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

Ответ 3

Вы можете использовать два класса: по одному для каждого перехода (первый для цвета, затем для z-индекса). Обратите внимание, что для удобства используется 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");
});

Он удалит z-индекс только через 1 секунду и будет применяться только к выходу.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/TptP8/