У меня есть меню ящика в моем приложении, которое отлично работает на рабочем столе, но на любом мобильном устройстве я вижу уродливый jank.
В заголовке У меня есть логическое значение, которое получает значение истины/ложь по щелчку гамбургера, который добавит out
класса в .container
выталкивания. Ящик является абсолютным для страницы, расположенной вверху справа, и когда класс out находится на контейнере, он перемещает 280 пикселей вправо, открывая ящик.
здесь упрощены html и css:
<div class="landing-page-container" ng-class="isMenuOut ? 'out' : ''">
<header/>
<main/>
<footer/>
</div>
<sidebar>
CSS:
.home-slide-menu{
width: 280px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow:hidden;
}
.landing-page-container{
right:0;
position: relative;
transition: right 0.2s ease-in 0s;
}
.landing-page-container.out{
right:280px;
overflow: hidden;
}
Этого может быть недостаточно, чтобы помочь отладить это, но если есть какие-либо красные флажки, пожалуйста, дайте мне знать, и если вам нужна дополнительная информация, пожалуйста, дайте мне знать.
Вам нужно использовать 3D-преобразования.
http://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm
Когда вы работаете с отображением вещей на экране, вычисления позади него могут выполняться либо CPU, либо графическим процессором (например, графической картой). В общем, вы должны полагаться на свой GPU столько, сколько сможете для любых задач, связанных с отображением... особенно для таких задач, как анимация.
Как обеспечить, чтобы ваши анимации выполнялись в аппаратном режиме на графическом процессоре? Используя translate3d! Когда вы трансформируете элемент с помощью translate3d, этот элемент находится в стране GPU в браузерах на основе Webkit, таких как Chrome и Safari (что и используется вашим iPhone и iPad).
Вот простой пример, который я сделал:
https://jsfiddle.net/asmsomtw/
Важный CSS-фрагмент из скрипки
/* Transition effect and timing */
div {
transform: translate3d(0, 0%, 0);
transition: transform 500ms ease-in;
}
/* The transform applied by appended class that toggles drawer to hide */
.hide {
transform: translate3d(-100%, 0, 0);
}
Попробуйте на устройствах, с которыми вы сталкиваетесь, и затем замените эти значения right
как ваша оригинальная реализация, и посмотрите, сможете ли вы увидеть разницу.
Никогда не злоупотребляйте графическим процессором, но будьте осторожны в том, что ускоряется.
Рассмотрите возможность использования TweenMax. Это JS-анимационная библиотека, которая хорошо работает с Angular и определяет приоритетность производительности. Вы можете проверить это здесь:
Даже Google рекомендует: https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=ru
Например, вот как вы будете делать то, что делаете в TweenMax в Angular
function(){
TweenMax.to(someDomElementAsVariable, 0.3, {
right:"350px"
});
};
Эта функция изменит "правильное" значение someDomElementAsVariable на 350 пикселей в течение 0,3 секунды.
Вы можете попробовать с преобразованием 2d, оно должно быть более жидким
-ms-transform: translate(-280px,0); /* IE 9 */
-webkit-transform: translate(-280px,0); /* Safari */
transform: translate(-280px,0); /* Standard syntax */