Анимации отжатия и мерцания с использованием анимации CSS

Question

Я работаю над интерактивным веб-интерфейсом и нахожусь в мерцающих и отстающих анимациях.

Я почти полностью использую CSS-переходы, добавляя и удаляя классы с помощью jQuery для запуска/остановки любой конкретной анимации. Я слышал, что это лучше для производительности, чем использование анимации jQuery, но я все еще сталкиваюсь с мелькающими и отстающими анимациями при использовании Chrome (предполагаемого браузера для приложения).

Проверьте это здесь: lib.ncsu.edu/hunt_touchscreens/demo

Вот пример одного из переходов я делаю. Это очень просто, и я не использую префиксы webkit, o и т. Д.

#x { 
    opacity: 0; 
    transition: opacity .5s; 
} 

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

Большое спасибо за любой совет.

Answer 1

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

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

Подробнее об этом here, но суть его использует следующие свойства для изменения элементов,

• позиции - преобразование: translateX (п) translateY (п) translateZ (п);
• Масштаб - преобразование: масштаб (n);
• Вращение - преобразование: вращение (ndeg);
• Opacity - opacity: n;

Так что вам нужно переписать все эти «левые» изменяет свое положение той или иной форме transform: translateX(); и рассмотрим, как это влияет на другие элементы внутри страницы, если вы хотите оптимальной производительности.