Замораживание / прыжки при пролистывании страниц в Framer-Motion

#javascript #reactjs #framerjs #framer-motion

#javascript #reactjs #framerjs #framer-движение

Вопрос:

У меня есть приложение, которое я создаю с помощью Framer Motion, и я пытаюсь отключить вертикальное пролистывание всякий раз, когда кто-то проводит пальцем по левой или правой странице. Я заметил, что есть «всплески задержки» или «зависания», и пролистывание не является плавным. Когда вы проводите пальцем влево / вправо, он перемещается до определенной точки, на мгновение останавливается, а затем продолжается. Это похоже на небольшие зависания, и я определил, что это так, потому что я использую onChangePage для переключения drag значения для родительской страницы. Когда я это комментирую, зависаний больше нет.

Демонстрация: https://codesandbox.io/s/framer-motion-pages-shmd9

Чтобы повторить это, выполните быстрые прокрутки влево / вправо. Зависания не происходят при любом движении вверх / вниз, потому что это не вызывает никаких изменений, только движение влево / вправо. Когда onChangePage часть закомментирована, зависания также не происходят для движения влево / вправо. Любая помощь приветствуется, спасибо.

РЕДАКТИРОВАТЬ: я понимаю, что это происходит из-за повторного рендеринга, но я стремлюсь иметь возможность отключить функцию вертикальной прокрутки в тот момент, когда вы проводите пальцем влево / вправо, без зависания повторного рендеринга.

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

1. Для тех, кто просматривает это сейчас — я решил это, используя другой пакет, react-swipeable-views .

2. Для тех, кто просматривает это даже позже — я нашел еще лучший вариант, Swiper JS . Демонстрация песочницы кода здесь!