css3 как вызвать событие, когда переход осуществляется на полпути?

Question

Я думаю, что все в названии. добавить класс с JavaScript, который в основном делает:

.rotation { 
    transform:rotateY(180deg); 
    transition-timing-function: linear; 
    -webkit-transition-timing-function: linear; 
} 

Мне нужно знать, когда переход достиг 90 градусов. Эти значения приведены для примера. Проблема в том, что если я повторю 2 преобразования 90degs, я получаю небольшое отставание посередине, а не под Chrome, но под Microsoft Edge и Firefox.

Есть ли у кого-то решение, либо для запуска события на полпути, либо во избежание этого отставания при повторении перехода?

Спасибо!

Answer 1

Я думаю, что самый простой способ добиться того, что вы хотите, - это установить дополнительный переход на какое-то свойство, которое не видно.

Я иногда использовал z-index, что вы можете выбрать другой. Тогда:

div { 
    transition: transform 1s linear, z-index 0.5s linear; 
    z-index: 1; 
} 
.rotation { 
    z-index: 2; 
    transform:rotateY(180deg); 
} 

Вы получите 2 события, первый в 0.5s