Медленная анимация jQuery на iPad2

Question

Я сейчас создаю оптимизированный для iPad сайт. У меня есть несколько фрагментов текста, которые я должен показать / скрыть, когда пользователь нажимает соответствующую кнопку. Текст находится внутри тега

. Я использую jQuery для переключения видимости текста:

$("my selector").toggle("fast");

Но это действительно нестабильно ... Есть ли какой-то специфический для iOS способ сделать анимацию, может быть, другой фреймворк или что-то еще?

Я не думаю, что это должно быть , что медленно ...

Answer 1

Существует несколько сценариев анимации, предназначенных для iOS, но, по сути, вместо них следует использовать CSS-анимацию, а точнее свойство translate3d (для позиционирования), которое запускает оборудование iOS.

Для переключениянепрозрачность, вы можете использовать обычный -webkit-transition и toggleClass, f.ex:

p { -webkit-transition: opacity 0.2s linear; opacity:1 }
p.hide { opacity:0 }

, а затем:

$("my selector").toggleClass('hide');

Я сделал для вас простую демонстрацию: http://jsfiddle.net/rQFZd/

Вы можете обнаруживать сенсорные устройства и обслуживать анимацию CSS специально для тех, кто их поддерживает (и предпочитает).

РЕДАКТИРОВАТЬ: пример высоты анимации: http://jsfiddle.net/rQFZd/1/. Я не являюсьКонечно, насчет производительности iOS, но я думаю, что она должна быть лучше, чем jQuery.

Вы также можете добавить еще один контейнер, а затем использовать translate3d для изменения положения элемента вместо его сжатия, что, безусловно, должно быть более плавным в iOS.Пример: http://jsfiddle.net/rQFZd/2/