Translate3d изменчиво к концу трансформации на мобильном устройстве

Question

Первоначально я использовал функции слайдов jQuery, чтобы выдвигать страницу из поля зрения (чтобы показать другую страницу под ней) в приложении Cordova, которое я создаю, и хотя это отлично работало в моем настольном браузере, оно (теперь понятно) было довольно изменчивым фактическое мобильное устройство. Так что я выяснил причину этого и узнал, что я должен использовать CSS3-анимацию / переходы для мобильных устройств, а точнее Translate3d для всего, что может потребовать рендеринга с помощью графического процессора. Итак, я сделал эти изменения так:

#mainpage{
    z-index: 10;
    top: 0;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    border-bottom: 1px solid #111111;
}
#mainpage.out{
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

и я просто переключаю класс out по мере необходимости.

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

Устройство, которое я использую, имеет процессор nVIDIA Tegra 3 с 12-ядерной высокопроизводительной графикой.

Answer 1

Я думаю, что это не так, как вы должны делать анимацию.

Попробуйте следующее:

#mainpage {
   z-index: 10;
   top: 0;
   border-bottom: 1px solid #111111;
   -webkit-transition: -webkit-transform .5s linear;
   transition: transform .5s linear;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

#mainpage.out {
   -webkit-transform: translate3d(0,-100%,0);
   transform: translate3d(0,-100%,0);
}

Первое изменение - укажите тип свойства, которое вы хотите анимировать (transition параметр), не уверен, что вы оживляете, когда пишете all,

Во-вторых, укажите переход "назад" с помощью translate3d(0,0,0), Также не уверен, если это имеет значение здесь, хотя. Я надеюсь, это поможет вам.