Transiciones CSS3: cómo demorar el restablecimiento de la propiedad del índice Z?

Question

Básicamente, se agrega una clase "resaltada" a los elementos con clase "edge" dinámicamente a través de javascript en mouseenter. La clase de resaltado se elimina en mouseleave. Quiero hacer la transición del color del borde de estos elementos. Sin embargo, esta clase "resaltada" también modifica el orden de la pila. Quiero que se establezca un índice Z de 1 en todos los bordes resaltados antes de que comience la transición (en el mouseenter) y quiero que el índice Z de 1 se elimine después de que se complete la transición (en mouseleave). Actualmente, la propiedad del índice Z se restablece inmediatamente después de eliminar la clase "resaltar".

base estableció:

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

primer intento (obviamente la demora fija el calendario en un extremo y se mete hacia arriba por el otro):

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

Cualquier y toda ayuda es mucho apreciado. Gracias por adelantado.

edición: Tenga en cuenta que el usuario puede mouseenter/mouseleave en varios bordes diferentes antes de que las transiciones tengan la oportunidad de completarse. Gracias.

Answer 1

Use transition-delay. Puede hacerlo para que se eleve al pasar el mouse pero espere un momento antes de hundirse al pasar el mouse al asignar un tiempo de retardo diferente al elemento cuando se encuentra en su estado de desplazamiento.

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

Esto funciona en cromo, no está seguro si va a trabajar en otros navegadores.

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

Answer 2

Se podría utilizar dos clases, una para cada transición (el primero para el color, a continuación, para el índice z). Tenga en cuenta que lo siguiente se realiza mediante jQuery para mayor comodidad, y es solo para un borde. Para hacerlo con borde múltiple, necesitaría almacenar un temporizador por borde.

Dado el marcado siguiente:

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

(he añadido un poco de cambio de color en la segunda transición sólo para demostrar que).

Y la siguiente 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"); 
}); 

Se eliminará el índice z sólo después de 1 segundo, y se aplicará sólo en la salida.

Se puede ver en acción aquí: http://jsfiddle.net/TptP8/

Answer 3

Puede utilizar un retraso, como se sugiere Jcubed, o las funciones de temporización y step-endstep-start. El truco consiste en utilizar dos timing functions diferentes: escalonado para z-index, y lineal para opacity y otras propiedades continuas.

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

Ejemplo: http://jsfiddle.net/cehHh/8/