60 кадров в секунду с использованием css анимации и translateX, но не в процентах и ​​не в пикселях - PullRequest
Новая
       83

60 кадров в секунду с использованием css анимации и translateX, но не в процентах и ​​не в пикселях

0 голосов
/ 24 января 2020

Введение

Я пытаюсь создать простой переход столбца, используя Bootstrap.

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

Воспроизведение

Как воспроизвести

  1. Откройте полноэкранное приложение здесь: https://lvd2m.csb.app
  2. Теперь вы видите анимацию с «slideWithPixels» CSS class

  3. Если вы нажмете кнопку «Убить анимацию», очевидно, ничего не произойдет; может быть, курсор мыши висит некоторое время в форме маленькой руки, но анимация плавная, верно?

  4. Если вы сейчас нажмете кнопку «Переключить CSS класс»

  5. вы увидите анимацию jank / lag / freeze, назовите ее как хотите

Объяснение

Я использую два CSS класса:

  • slideWithPixels с transform: translateX(-350px)
  • slideWithPercentage с transform: translateX(-101%).

Я хочу использовать translateX(-101%) потому что, как вы можете видеть, я использую Bootstrap адаптивную сетку, и я не знаю, до какой ширины мой столбец (не фиксирован).

Пиксели не хороши, потому что анимация может начаться слишком много до или слишком много после области просмотра 0 пиксель и процентное зависание, как показано в этом примере.

Почему процентный процент зависает, когда основной поток занят javascript работа ?

Что вы предлагаете использовать вместо пикселей и процентов?

Я заблудился с этой проблемой.

Спасибо всем.

...