Улучшите скорость CSS3 на iPad

Question

iOS в целом имеет тенденцию сосать с переходами CSS3, анимацией, трансформациями и т. Д. Какие IMO являются одними из лучших функций этой технологии.

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

Есть ли способ улучшить производительность CSS3-переходов, преобразований, анимации и т. Д. На iOS? Или веб-приложения обречены быть пластичными подделками нативных приложений?

Редактировать: вот код оскорбления ...

http://www.abhi.my/sl/html/

Просто перейдите по этой ссылке, и вы увидите небольшую демонстрацию, которую я собрал ... Анимации плавные и приемлемые при просмотре в настольном браузере, страдает тот же сайт на iOS ... Этот был предназначен для iPhone 4 ...

Не стесняйтесь пройтись по источнику и указать на вещи ...

Answer 1

3D-преобразования с аппаратным ускорением в iOS, поэтому все, что вам нужно сделать, это использовать 3D-синтаксис, когда вы это делаете, и он отлично работает - по крайней мере, в 3GS и выше.

Но вы не используете трансформации в вашем примере, вы используете переход на позицию, который совершенно другой, и да - приводит к дерьмовому fps на мобильном телефоне.используя -webkit-transform: translate3d (-100%, 0,0) (или подходящий аналог).Вы можете увидеть, насколько это более плавно, из примера на этой странице.

Answer 2

Вы должны определенно использовать -webkit-transform вместо -webkit-transition.С учетом вышесказанного, для кросс-браузерной поддержки и простоты использования, я бы определенно выбрал плагин, такой как jQuery Transit , который позволяет вам легко создавать плавные переходы и эффекты, похожие на нативные, на iOS, а такжеAndroid и другие мобильные устройства.

Пример JSFiddle of jQuery Transit в действии

Пример кода:

HTML:

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

Javascript:

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});

Кто-то в значительной степени сделал тяжелую работу за вас.Я терпеть не могу возиться с анимацией CSS3, и этот плагин делает свою работу удивительно.Я проверил это на iPad, iPod Touch, iPhone и Android.Я люблю нативное чувство, которое оно дает.