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

Question

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

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

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

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

Для жизни я просто не могу заставить это работать с SC, и мне бы очень хотелось, если бы кто-то мог указать мне правильное направление.

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

Кроме того, есть ли преимущество дляиспользуя реагирующую переходную группу в течение некоторого временинг вроде 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.