От чего зависит плавность сайтов? Имею в виду разные эфекты появления меню, слайдеры, скроллы и тп.
Сделал меню, на пк проверяю все нормально, плавно, красиво. Но, когда дело доходит до проверки на моб. устройствах мне становится стыдно. Все рывками, дергается, непонятно как смещается и тп. Даже обычный скролл тупит.
Подскажите, как правильно делать плавную верстку, от чего это зависит(css свойства и тп), какие есть подводные камни?
P.S. Пример моего меню
$('.trigger-menu').on('click', function () {
$('body').toggleClass('menu-open');
});
$('.bg').on('click', function () {
$("#mobile-menu-trigger:checked,.menu-inner-trigger:checked").prop("checked", false).change();
$('body').toggleClass('menu-open');
});
ul,
li {
list-style: none;
margin: 0;
padding: 0; }
.container {
width: 500px;
height: auto;
margin: auto;
padding: 15px;
overflow: hidden;
border: 1px solid lightgrey;
position: relative;
height: 300px; }
.mobile-menu {
width: 80%;
max-width: 300px;
position: absolute;
top: 0;
right: auto;
bottom: 0;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
-webkit-transform: translate3d(-102%, 0, 0);
transform: translate3d(-102%, 0, 0);
left: 0;
z-index: 5;
box-shadow: 3px 0 4px lightgrey; }
.mobile-menu__header {
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #ff4081;
background: #fff; }
.mobile-menu__logo-wrapper {
width: 150px;
margin: 0 auto; }
.mobile-menu__list {
width: 100%;
height: 100%; }
.mobile-menu__item {
border-bottom: 1px solid lightgrey; }
.mobile-menu__link {
padding: 5px;
display: block; }
.mobile-menu__inner {
background: #f78a8a;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: 0;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
#mobile-menu-trigger:checked + .mobile-menu {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
input[data-menu="menu"]:checked + .mobile-menu__inner {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.display-hidden {
display: none; }
.trigger-menu {
background: #91a2f7;
float: right; }
.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1;
visibility: hidden;
opacity: 0;
transition: all 0.3s; }
.menu-open .bg {
opacity: 1;
visibility: visible; }
.logo {
width: 100%;
height: auto; }
.menu-back-trigger {
border-bottom: 1px solid #ff4081; }
Ответ
В этой очень легкой задачке, как выдвижное меню, слишком сложная реализация. Ты просто перегружаешь браузер ненужной работой, ни тебе, ни ему. Зачем translate3d, если идет работа с чистейшим 2Д? Я бегло посмотрел, но вероятно, вложенность тегов не учитывает слои для прорисовки браузером, а они, в свою очередь, плохо заданы css свойствами. Я советую покапать в сети о том, как браузер прорисовывает анимацию, что лучше использовать transition или animation и в каких случаях. Даже если эффект достигается один и тот же, зачастую два разных свойства оказывают неравный след на производительности. У меня есть такой пример: я пытался сделать тень на градиентном элементе. Дело в том, что text-shadow рисуется поверх градиента (background-color: linear-gradient). И это можно обойти двумя путями, в основном теге отрисовывать тень с помощью text-shadow, а в псевдоклассе рисовать градиентный текст. Этот вариант я и выбрал, сейчас расскажу почему. Либо же использовать filter: drop-shadow. И тут уже встает логический вопрос, по простой внутренней логике понятно, ведь чтобы нарисовать простенькую тень, не хотелось бы использовать фильтр. Почему? Если при этом ещё использовать transform: scale, то браузер каждый кадр этого скейла будет отрисовывать новый фильтр. А это затратно и на самом деле на моем стационарном компе, в Хроме, начинало подлагивать такое появление, хотя анимация шла 80ms, то есть быстрее чем среднее моргание человека. Так что вывод такой: нужно отрисовывать в голове и понимать, как рисует это всё браузер, не использовать навороченные свойства в сторону их силы, а посмотреть на простенькие, но эффективные в связке css-свойства.
Комментариев нет:
Отправить комментарий