CSS3 анимация с транзитом не одновременная в IE / FF

0

Я работаю над библиотекой презентаций, чтобы сделать мою жизнь намного проще. Естественно, анимации - довольно неотъемлемая часть этого.

В библиотеке используется Transit для активации анимации для повышения качества CSS3. Одна конкретная анимация имеет элемент, который скользит в презентацию или выходит из нее. Если вы придерживаетесь двух из них вместе (один идет, один выходит), он создает действительно хороший эффект для перехода слайда к слайду. См. Демонстрацию здесь (используйте клавиши со стрелками/щелкните, чтобы перейти вперед/назад через презентацию)

(Все это в Windows). Chrome хорошо отображает эффект, вы не видите разрыв между двумя "слайдами" во время перехода, потому что они эффективно воспроизводятся одновременно. Тем не менее, Chrome искажает текст во время переходов, и я не могу этого сделать, поэтому, когда вы представляете, я бы хотел использовать что-то вроде Firefox или даже IE, потому что они всегда красиво выделяют текст. Однако, как в FF, так и в IE, между двумя слайдами появляется зазор, как если бы они были очень немного раздвинуты.

Это правда, что они были разнесены, когда я запустил Date.now() во время начала каждой анимации, в Chrome было примерно 4 мс разницы и 3 мс разницы в Firefox (хотя некоторые из этих накладных расходов можно отнести к созданию объекта Date, и по-прежнему существует большая оптимизация для этого). Chrome имеет большую разницу во времени, но Firefox - тот, у кого разрыв в анимации.

Есть ли способ исправить это? Это проблема с моей реализацией (здесь, на Github), или что-то связанное с Transit (здесь, на Github)? Если нет очевидного решения, я мог бы попробовать использовать Tram.js, но сначала хотел бы избежать этого, потому что он немного более неуклюж, чем Transit.

Любое понимание этого будет оценено по достоинству. Извините, что на этой странице нет кода, но это может быть связано с несколькими вещами, поэтому у меня есть вся библиотека для просмотра.

Теги:
cross-browser
jquery-transit

1 ответ

0

Делая отладку, я вижу, что функция простоты настроена на

  easeInOutCubic: "cubic-bezier(.645,.045,.355,1)"

Я бы сказал, что проблема возникает здесь, и что если вы хотите, чтобы 2 анимации прошли идеальную синхронизацию, вы должны выбрать функцию линейного ослабления.

  • 0
    Мне очень нравится замедление, и даже если бы ослабление было линейным, между элементами, которые должны быть рядом, все равно был бы разрыв, он просто оставался бы почти постоянным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню