Надеюсь, это поможет.
Я работаю над веб-приложением специально для iPad и использую переход CSS3 для анимации div (перемещайте его слева направо).
Мой класс выглядит так:
Когда пользователь нажимает кнопку, я делаю это:
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
Это прекрасно работает
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
КРОМЕ ПЕРВЫЙ время, когда пользователь запускает переход; в первый раз очень заметно мерцание.Я понимаю, что мне не нужно использовать translate3d, так как я перемещаю div влево и вправо, но, насколько я понимаю, это заставляет iPad использовать ускорение GPU. (Это верно?)
Спасибо заранее!
[ОБНОВИТЬ]
Я был немного двусмысленным по поводу "мерцания". Короче говоря - я экспериментировал с широким спектром переходов CSS3 (особенно на iPad) и постоянно - заметил заметное мерцание на
Начало или жеконец перехода.Другими словами, сами переходы ОЧЕНЬ гладкие. Однако, в зависимости от точных настроек, заметное мерцание происходит непосредственно перед началом или окончанием перехода.
Вот еще один пример: у меня есть три фотографии (PNG), накладываемые друг на друга.
Нижний PNG имеет непрозрачность = 1,0, верхние 2 имеют непрозрачность = 0,0. Используя -webkit-keyframes, я могу получать плавные плавные переходы по мере того, как фотографии появляются и исчезают. Когда анимация заканчивается, нижняя фотография заканчивается при непрозрачности = 1.0, две верхние при непрозрачности = 0.0. (Это должно быть их окончательное состояние).
Однако, как только заканчивается анимация, нижняя фотография мигает. Как будто браузер заставляет перерисовывать / перекрашивать экран, и это занимает несколько долей секунды.
Это достаточно плохо, чтобы испортить эффект и сделать переходы непригодными для использования. (На моем iMac это
почти, но не совсем, незаметный. На iPad это нельзя пропустить).Я имел дело с той же проблемой, и я нашел решение здесь на SO: