Блог

Я работал над небольшим веб-сайтом, используя react, и хотел анимировать мобильное меню, появляющееся и исчезающее при изменении состояния. Я слышал, что использование react-spring идеально подходит для этого варианта использования, и последние два дня пытался это выяснить.

Из того, что я понимаю, он должен плавно переходить между from объектами, enter , и leave , когда компонент монтируется/размонтируется, но в моем случае вместо этого он просто внезапно обрывается. Когда я нажимаю кнопку, чтобы открыть меню , вместо того, чтобы переключаться между opacity:0 и opacity:1 , компонент внезапно появляется, а когда я нажимаю кнопку, чтобы закрыть его, он исчезает. Существует даже небольшая задержка при закрытии, во время которой, я полагаю, должна воспроизводиться анимация отпуска.

Вместо этого я попробовал использовать пружину, но она не так хорошо работает с компонентами, которые также будут размонтированы, и не воспроизводит анимацию ухода. Также пробовал добавлять и удалять null в качестве второго аргумента функцию useTransition и использовать .map в визуализации, но, насколько мне известно, они были обесценены.

Я создал небольшой пример кода в codesandbox. https://codesandbox.io/s/react-spring-menu-dz4iq

Я использую последнюю версию react-spring(9.2) и браузер Google chrome, если это полезная информация. Надеюсь, кто-нибудь из вас сможет указать мне правильное направление.