Соображения относительно производительности переходов CSS3

Question

В рамках проекта, который должен поддерживать мобильные устройства, я работал над имитацией управления iPhone с помощью CSS3. У меня есть вид и ощущение этого элемента, и я использую переходы CSS3 для анимации изменения его состояния.

Когда у меня есть сам элемент на странице, на котором ничего нет, переход на iOS относительно плавный. Однако, когда я комбинирую это с другими элементами CSS на странице, результат в iOS, как и все остальное, отстает. Это немного лучше, чем сырая анимация jQuery, но не намного.

Я настроил две тестовые страницы, чтобы продемонстрировать, что я имею в виду (в обычном браузере разница едва заметна):

Переключить элемент управления самостоятельно> http://ben -major.co.uk / labs / iPhone% 20UI / ios_toggle.html

В сочетании с другими элементами> http://ben -major.co.uk / labs / iPhone% 20UI /

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

Любые советы и комментарии приветствуются.

Answer 1

Вы должны быть осторожны с этим, поскольку это может изменить z-индекс элемента, к которому он применяется, но добавив:

-webkit-transform-style: preserve-3d;

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

Если вы сталкиваетесь с ошибками компоновки, вы можете просто переключить ваши 2d переходы на 3d значения, поэтому:

-webkit-transform: translate(100px, 100px)

становится:

-webkit-transform: translate3d(100px, 100px, 0px)

Вы можете увидеть демонстрацию того, как это помогает ускорить процесс, на http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

Если после применения этого к элементу вы видите его или элементывокруг него моргайте при использовании, затем используйте:

-webkit-backface-visibility: hidden;

Для элемента, и это должно исправить проблему.

Эти советы помогли мне создать быстрые и эффективные переходы CSS, надеюсь, ониПомогите.:)

Answer 2

Chrome недавно улучшил производительность 2D-перехода, и теперь этот трюк больше не нужен. Лучше всего, если вы удалите translate3d, у вас больше не будет проблем с z-index! Используйте тест, чтобы доказать. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

Answer 3

Также вы можете попробовать will-change: transform;, подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility

Answer 4

Я думаю, что он уже довольно старый, но для тех, кому все еще нужны хитрости для улучшения производительности перехода на мобильном устройстве, вы можете применить:к элементу, который вы оживляете.Этот трюк в соответствии с этим блогом: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/. Я пытался, и это работает довольно хорошо.