Страницы

Поиск по вопросам

воскресенье, 26 мая 2019 г.

От чего зависит плавность сайтов?

От чего зависит плавность сайтов? Имею в виду разные эфекты появления меню, слайдеры, скроллы и тп. Сделал меню, на пк проверяю все нормально, плавно, красиво. Но, когда дело доходит до проверки на моб. устройствах мне становится стыдно. Все рывками, дергается, непонятно как смещается и тп. Даже обычный скролл тупит.
Подскажите, как правильно делать плавную верстку, от чего это зависит(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-свойства.

Комментариев нет:

Отправить комментарий