Добрый день, уважаемые форумчане!
[ПРЕДИСЛОВИЕ]
Сейчас занимаюсь разработкой сайта с большим количеством анимации.
Раньше реализовывал это через JS, но с появлением анимации на CSS3 решил испробовать этот способ.
Суть в том что имеется 6 последовательно срабатывающих анимаций.
В начале пути была цель отловить окончание анимации для запуска последующей. Первое что пришло на ум - добавить обработчик события:
anim=document.querySelector("#spinner");
anim.addEventListener('transitionend', function() {});
Однако данный способ не подошел. Проблема была в том, что при переключении вкладки - события не срабатывали. Анимация суммарно длится около 40-50 секунд. Временно был поставлен костыль с setTimeout с задержкой равной длительности анимации. Но даже в этом случае наблюдаются баги - при переключении вкладки анимация, запущенная во время фокуса на другой вкладке запускается, но находится в спящем состоянии, а при возвращении запускается.
Анимация на CSS3 реализована стандартно:
|
Код:
|
#spinner{
height: 100px;
width: 100px;
transition-duration:5s;
transition-property: height;
} |
[ИТОГ]
Хотелось бы узнать сталкивался ли кто-либо с такой проблемой и в чём может быть проблема?
Большое спасибо за внимание!