CSS3, WebKit Transition Order? Как поставить очередь на переходы?

У меня есть следующее:

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

Проблема в том, что я не хочу, чтобы z-индекс переходил до тех пор, пока не будут выполнены верхняя и нижняя стороны.

Есть ли способ передать переход Webkit на переход сверху/снизу, а затем, когда это будет сделано, сделать z-index мгновенно или с длительностью в любом случае?

Спасибо

Ответы

Ответ 1

Вы должны указать задержку перехода z-index:

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

Ответ 2

И для вашей информации, в javascript, вы также можете прослушивать событие webkitTransitionEnd и изменять z-индекс при запуске этого события.

Это событие имеет два полезных свойства:

  • propertyName: имя свойства, участвующего в транзисторе
  • elapsedTime: время, прошедшее во время транзистора