CSS3 анимация с транзитом не одновременная в IE/FF
Я работаю над библиотекой презентаций, чтобы сделать мою жизнь намного проще. Естественно, анимации являются довольно неотъемлемой частью этого.
Библиотека использует Transit для анимации для ускорения работы с CSS3. Одна конкретная анимация имеет элемент, который можно вставить в презентацию или из нее. Если вы соедините два из них (один входящий, другой выходящий), это создаст действительно хороший эффект для перехода между слайдами. Смотрите демонстрацию здесь (используйте клавиши со стрелками / нажмите, чтобы перейти вперед / назад по презентации)
(Это все в Windows) Chrome хорошо отображает эффект, вы не можете видеть разрыв между двумя "слайдами" во время перехода, потому что они эффективно воспроизводятся одновременно. Тем не менее, Chrome искажает текст во время переходов, и я мало что могу с этим поделать, поэтому при представлении я бы хотел использовать что-то вроде Firefox или даже IE, потому что они всегда хорошо сглаживают текст. Тем не менее, как в FF, так и в IE, между двумя слайдами появляется разрыв, как если бы они были начаты очень немного друг от друга.
Это правда, что они были начаты отдельно, когда я регистрировал Date.now() во время запуска каждой анимации, разница в Chrome составляла примерно 4 мс, а в Firefox - 3 мс (хотя некоторые из этих издержек можно отнести к созданию объекта Date и еще предстоит много оптимизации). Chrome имеет большую разницу во времени, но Firefox - это тот, у которого разрыв в анимации.
Есть ли способ это исправить? Это проблема с моей реализацией ( здесь, на Github), или что-то связанное с Transit ( здесь, на Github)? Если нет очевидного решения, я мог бы попытаться использовать Tram.js, но я бы хотел сначала избежать этого, потому что это немного более неуклюже, чем Transit.
Любое понимание этого будет оценено. Извините, что на этой странице нет никакого кода, но это может быть связано с несколькими вещами, поэтому у меня есть целая библиотека для просмотра.
1 ответ
Делая отладку, я вижу, что функция легкости установлена на
easeInOutCubic: "cubic-bezier(.645,.045,.355,1)"
Я бы сказал, что проблема возникает отсюда, и что если вы хотите, чтобы 2 анимации шли в идеальной синхронизации, вы должны выбрать функцию линейного замедления.