2011-04-11 22 views
11

Tengo el siguiente:CSS3, orden de transición de WebKit? ¿Cómo hacer cola para las transiciones?

-webkit-transition-property: top, bottom, z-index; 
-webkit-transition-duration: 0.5s; 

El problema es que no quiero el índice z para la transición hasta después de la parte superior & parte inferior está.

¿Hay alguna manera de indicarle a Webkit la transición a la transición arriba/abajo y luego, cuando termine, haga z-index instantáneamente o con la duración, de cualquier manera?

Gracias

Respuesta

25

Tiene que especificar un retraso en la transición z-index:

-webkit-transition-property: top, bottom, z-index; 
-webkit-transition-duration: 0.5s; 
-webkit-transition-delay: 0s, 0s, .5s; 
+0

Ah rodaje que es grande. Lo pirateé antes utilizando fotogramas clave. Esto es mucho más elegante. Gracias – AnApprentice

+0

salvó mi tiempo, gracias –

6

Y para su información, en javascript, también puede escuchar en el caso webkitTransitionEnd y modificar la Z- index cuando se dispara este evento.

Este evento tiene dos propiedades útiles:

  • PropertyName: el nombre de la propiedad involucrada en el transistion
  • elapsedTime: tiempo transcurrido durante la transicion
+0

Muy útil, ¡gracias por compartir! – stian

Cuestiones relacionadas