Есть сайт SPA,
для мобильной версии есть мобильное выпадающее меню,
при клике на ссылку Главная или Контакты, есть обработчик скрытия меню,
скрытие происходит путём смены класса fadeIn или fadeOut.
При переходе на страницу с небольшим кол-вом контента просадок фпс нет,
и меню плавно закрывается,
но при переходе на страницу магазин,
есть просадка фпс и видны дёрганья меню,
я пробовал ставить задержку таймером при переходе страниц в 300мс, да это немного помогло, но дёргания иногда видны,
Если в этом случае поставить задержку на сам роут, скорей всего задержка также будет видна, хотя как тайминги настроить.
Я читал, что keyframe и transform translate, более умно обрабатывают анимацию, но в данном случае есть прерывание потока requestAnimationFrame,
каким образом решаются подобные проблемы, или это больше проблема React Native?
React Native - это не React, на нем не сайты пишут а мобильные приложения. Если хотите плавного - ставьте обработчик события перехода на конец анимации а не на клик, и будет вам счастье.
И еще - всякие транзишны с прозрачностью, тенями ооочень плохо рендрятся телефонами зачастую. Особенно это касается ios. Делайте адаптив и для мобильных штук убирайте фейды напрочь. Лучше уж анимация со смещением.
А как тогда быть с веб вёркером, или отдельный поток UI для респонзив мобильной версии сайта не применяется? Это лишнее звено в данном случае.
Например, в телеграмме, при клике на гамбургер всё плавно, но там и перехода нет с загрузкой фото на следующей странице и меню. И они используют наверно нативный мобильный gpu рендер, весь UI в отдельном потоке.
Вначале думал поставить событие по типу DOMContentLoaded или подобное, но Ваше решение немного лучше.
Попробую ещё установить пару тоаст библиотек, и глянуть, может у них там анимация напрямую через requestanimationframe сделана, и может переход будет плавней.
Фильтры и тени для меню не использовал, только прозрачность 0.75.
Да, для лучшей отдачи фпс лучше,иногда использовать может даже бокс шедов, возможно,он не так грузит как background-color, но у меня на телефоне, максимум 44фпс, не 60.
formasters777, Нужно определить причину подвисаний, попробуй посмотреть в сторону "тяжеловестных" компонентов через profiler либо мб используются тяжелые медиа ресурсы. по одному отключай и смотри за динамикой.
Средний
Простой
