Появление/скрытие элементов в Framer Motion

Анимация динамических компонентов в React-приложении с библиотекой Framer Motion. Используем компонент AnimatePresence и разбираемся с его настройками.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...

[@skysar]

Спасибо за видео! Очень понравилась библиотека, а видео помогло быстро с ней разобраться!

[@user-kb5kd7ln3h]

Спасибо за объяснение))
Код стал чище

[@unknown.6914]

Если у кого-то возникли трудности с exitBeforeEnter, то данное свойство устарело, его можно заменить другим - mode="wait"

[@renat_mg6881]

Спасибо, попробую применить в проекте

[@ИльясНуруясов-в2э]

Спасибо за видео! Очень помогло

[@danyadewops7026]

Ты лучшиЙ!!!!

[@SerhiiNesterov]

Спасибо

[@0xSxVKaJnwQ]

Столкнулся со странными поведением при испльзовании exitBeforeEnter (mode='wait'). Вместо того, чтобы закончить одну анимации и начать другую, из dom пропадают все элементы списка кроме одного, у него проигрывается анимация, после чего появляется обновленный список с анимацией всех элементов %(

[@devkonin]

Привет из 2023 ) давно хотел ппробовать ) было интересно

[@user-yv4ou3jl8y]

Вроде бы на 11:19 не баг, а тип ease: ease-in по дефолту, а когда transition задаёшь, то все дефолтных настройки обнуляются.

[@OriGami145]

у меня одного не работает exitBeforeEnter? гугл пишет заменить на mode='wait', но так же выскакивает предупреждение в консоли.

[@mishanep]

API могло измениться с новыми версиями. Рекомендую обратиться к документации.

[@leoibra6296]

очень помог бы разбор crossfade

[@Sergecp]

дякую, поміг чуваче
лайкос

[@4sARy]

Так а в чём разница между Framer Motion и React Transition Group ?

[@4sARy]

И какой смысл писать анонимную функцию, которая вызывает другую функцию-обработчик?

[@mishanep]

Чтобы ответить на вопрос о разнице, надо хорошо знать обе библиотеки. Касаемо реакт анимаций я работал с двумя библиотеками - framer-motion и react-spring. Framer-motion показался намного удобнее и функционал его намного шире. Я каждый месяц открываю для себя что-то новое, и библиотека стремительно развивается.

[@mishanep]

Касаемо анонимной функции, без примера сложно ответить на ваш вопрос. Разумеется, контекст всех своих видео я не могу помнить.

[@shahobkhf372]

exitBeforeEnter устарел и был заменен на mode="wait"

[@RewCSharp]

У меня у одного не работает ничего с учетом того, что я полностью все повторил?

[@mishanep]

Вероятно разница в версиях. Ролик был записан относительно давно, в библиотеки могли произойти breaking changes. Здесь варианта два - изучать документацию, чтобы найти как то же самое делается сегодня, либо использовать ту же версию, что была актуальна 2 года назад.

[@RewCSharp]

@@mishanep спасибо за совет.

[@deadPukan]

9:10

[@igor-grudinin]

Пипец какие велосипеды... А смысл??? Если бОльшую часть всей этой анимации можно элементарно сделать в CSS. Я уже молчу о том, что jQuery может делать по сути такие же эффекты, но с помощью всего одной команды. Я реально не понимаю, куда катится индустрия... К чему такое усложнение...

[@Edgar-pu1lc]

Если реакт компонент удаляется или добавляется на страницу, то с помощью css анимировать невозможно

[@sergey_zatsepin]

Прикольно, но коллапс кнопка явно не должна улетать вверх при появлении контента как здесь напр. 9:40, это bad ux. Открываешь так пункт faq и потом скроллишь вверх, чтобы его закрыть, а потом снова вниз, чтобы след. пункт прочитать и т.д. Явно не гуд. Как грится, надеюсь это не лажа в либе, а прост ведущий не донастроил.

[@GarrysFunny]

Так это зависит от того как ты скелет выстроил, библиотека тут вообще при чем?