Анимированная группа реакции-перехода с помощью ReactDOM createPortal

Question

Я ломал голову, пытаясь понять, как сделать что-то, что я решил, было бы довольно просто (я знаю...)

Цель состоит в том, чтобы создать минимальный и многократно используемый модальный компонент, который я могу анимировать в каком-то HOC с помощью кнопки триггера или ж / д.

Я создаю его с помощью createPortal, и цель состоит в том, чтобы добавить несколько простых анимаций при входе /выходе из указанного портала.

Я заставил это работать с использованием GSAP, но в идеале я хотел бы, чтобы вместо этого он использовал SC, чтобы мне не пришлось загружать другую библиотеку анимации.

Из-за моей жизни я просто не могу заставить это работать с СЦ, и мне было бы приятно, если бы кто-то мог указать мне правильное направление.

Я сделал песочницу здесь: https://codesandbox.io/s/r44w9m4o5p используя GSAP для запуска анимации, и это немного странно, но это в правильном направлении для того, к чему я стремлюсь.

Кроме того, есть ли преимущество в использовании response-transition-group над чем-то вроде https://github.com/react-tools/react-move?

Answer 1

Вы можете использовать CSSTransition компонент вместо Transition, CSSTransition просто переключит имена классов, используя заданные моменты анимации: .*-enter, .*-enter-active для переходного периода и .*-exit, .*-exit-active для выхода. Таким образом, вы можете определить все переходы, используя свойства CSS3 с styled-components,

Посмотрите на мою вилку: https://codesandbox.io/s/zz95v5103

Я только что продлил Modal со стилями перехода. Обратите внимание, что расширение стилей требует className свойство для компонента, который будет расширен, поэтому я добавил это свойство к вашему Modal составная часть.