Производительность CSS3?анимировать влево или перевестиX

Question

В демонстрации HTML5 / CSS3, которую я делаю, я использую CSS-переходы в основном для повышения производительности.

Мне было интересно, какой у меня пользовательский интерфейс - где в настоящий момент JQuery манипулирует атрибутом LEFT контейнера Div, например, на основе положения мыши, стоит ли вместо этого использовать transform: translateX(tx) вместо этого? или JQuery делает это автоматически, если браузер поддерживает это?

Answer 1

jquery не использует transform: translateX (tx). Вы должны сделать это вручную. Но это хорошая практика, потому что это на самом деле намного быстрее.

http://jsfiddle.net/MZBtr/2/

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

Вот демонстрация, демонстрирующая это: http://jsfiddle.net/zWavD/1/

Answer 2

Существует расширение jquery от Ben Barnett, которое расширяет jquery для анимации определенных свойств (слева один из них) с помощью CSS3.

http://www.benbarnett.net/2010/09/01/enhancing-jquerys-animate-function-to-automatically-use-css3-transitions/

Answer 3

Анимация JQuery анимирует свойства, которые вы ей передаете, она не пытается повторно угадать список свойств (насколько мне известно)

Единственная причина использовать перевод, а не анимации JQuery, это еслиВы заботитесь о лучшей производительности на iPad и iPhone.CSS-преобразования выгружаются с помощью графического процессора на этих устройствах (при условии, что вы используете translate3d, а не translate2d), и они скоро появятся на других мобильных устройствах, таких как Android), а также в настольных браузерах, таких как Chrome и Safari.