Я играю с анимацией / переходом css3 и заметил небольшую проблему в моем проекте.
Источник: http://jsfiddle.net/paranoida/cuwgQ/
Полноэкранная версия: http://jsfiddle.net/paranoida/cuwgQ/show
Требование: Safari / Chrome
Я хочу создать плавное затухание между двумя слайдами. Я использовал событие webkitAnimationEnd для создания обратных вызовов.
Длительность слайдов анимации установлена на 5с .
Большие пальцы (индикатор выполнения) имеют собственную продолжительность (на 1 с меньше, чем у слайдов) = 4 с .
Я добавил «текущий» класс к следующему элементу, если анимация индикатора выполнения завершена. После этого я удалил «текущий» класс из предыдущего элемента, если анимация слайда завершена. И так далее ...
Отлично работает между слайдами 1 и 2, 3 и 4, 5 и 6 и т. Д. Я не знаю, почему js имеет проблемы со слайдами 2 и 3, 4 и 5; /
Возможно, это проблема синхронизации, но я не уверен на 100%.
Моя концепция:
1. [0s] запустить анимацию (первый элемент имеет «текущий» класс)
2. [4s] - следующий слайд имеет «текущий» класс
3. [5s] - убрать «текущий» класс из первого слайда
4. [9s] - следующий слайд имеет «текущий» класс
5. [10s] - убрать «текущий» класс из второго слайда
6. ...
Теоретически работает и для других классов, кроме "current".
Пример: _ http://jsfiddle.net/paranoida/cuwgQ/18/show/
(Вам нужно использовать webinspector или firebug)
Есть идеи?
Спасибо,
Рафал