Анимация перехода между страницами в React SPA с react-spring
Вставка
- Опубліковано 27 вер 2024
- Как сделать анимацию для перехода между страницами в Single Page Application на React? Использовать возможности библиотеки React-Spring и ее хука useTransition. Разбираемся и практикуем.
_
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Заказать консультацию можно здесь pcgramota.com/...
Больно было смотреть на стили, но большое спасибо за это видео, сильно поможет в изучении реакта
Несильно страшно, если это будет лежать в условном routing.tsx и ты не будешь заглядывать в него больше никогда после создания
Очень круто объясняешь. Приятно смотреть уроки!
Большое спасибо за урок! Для меня оказался весьма полезным. Как по мне, "воды" в уроке нет
Миша, Спасибо!
Soy colombiano a pesar no hablar tu idioma me ayudaste mucho con el error del useLocation Gracias
Qué bien! Estoy contento de ayudarte.
крутой канал, почему так мало просмотров, респект автору
И что это за костыль с позиционированием... супер... сделал... пойду в документацию крч
Сейчас роутинг по-другому делается, но все равно спасибо
Это где как :D на моем сегодняшнем проекте роутинг именно так и делается
Очень круто ,только я после 18 минуты потерял суть
У меня привстал на твой курс
как быть в 6й версии если там нет компонента switch
Там есть компонент Routes, ставший заменой свичу. У меня есть отдельный плейлист по шестой версии роутинга.
@@mishanep Для начала огромное вам спасибо за старания. Ваши ролики интересны. Я просто ищу информацию как делают анимацию с роутами. Нужно сделать анимацию с роутами. В начале слад из одного элемента, переходим на 2й слад на котором карта, в ней что-то ищем возвращаемся назад и она не уничтожается, можем снова на неё слайднутся и находиться в предыдущем состоянии. С помощью какого инструменты вы бы организовали данное поведение?
Михаил, планируются ли видео по Vue 3?
Приветствую!
Можно подумать. Что-то конкретное по Vue 3 интересует?
@@mishanep обзор каких-то принципиально новых решений/фишек. может о специфике использования TS.
А не лучше ли давать двум страницам на время анимации позишн эбсолют? Вместо того, чтобы гвоздями прибивать вообще весь контент? Это же не норм, ну.
К сожалению не работает, причину так и не выяснил как только пытаюсь назнаить: const transitions = useTransition(location, (location) => location.key,{}); в браузере белый экран, а в консоли: Uncaught TypeError: Cannot read properties of undefined (reading 'key')
Передавай location.pathname вместо location.key, на видео ошибка
Миша необходимо указать что нужно использовать react-spring 8.0.27
На других версиях не работает?
@@mishanep сейчас вот делал, на последней действительно не работает, что то пишет pathname не найден и сервер 500 отдает, пытался разобратся не понял в чем причина может быть.
@@mishanep Похоже, что да. Я установил указанную 8.0.27 и react router dom v6 и все заработало. До этого устанавливал последнюю версию react-spring и dom v6 - не работало.
видео то полезное, на СЛИШКОМ много воды, можно было 15 мин подготовиться и уложиться в 15 мин, вместо 25
Здесь всегда стоит вопрос баланса. Думаю, для новичков более компактная версия была бы более сложной для понимания. Но я пробую, экспериментирую. Думаю следующее аналогичное видео, уже с Framer Motion, будет покороче =)
@@mishanep мне понравился например данный формат, ничего лишнего сказано не было.
@@mishanep а Framer Motion по круче будет данной библиотеки ?
@@_paleman мне она показалась более очевидной в использовании. Возможно, уровень крутости примерно одинаковый, но Framer Motion как-то понятнее, да и задокументирован лучше.
у меня выдает ошибку location undefined, router перенесла в index.js.
На днях обновилась версия react-router-dom до шестой. Возможно ошибка с этим связана (проверьте какая версия у вас установлена).
@@mishanep я использовала sandbox, там 6-ая установилась. Кстати вместо Switch пришлось использовать Routes. А вот с location непонятно как быть.
Есть хук useLocation, он возвращает объект location.
@@mishanep этот хук я и использовала, все как в уроке.
@@gingashie там могла измениться структура самого объекта. Если ссылку на codesandbox дадите, попробую глянуть что не так.