Блог

Я создал модальный / диалоговый компонент, используя React и Tailwind . Вот codesandbox с моей проблемой.

Теперь я хотел бы показать и скрыть модальный режим с помощью красивой анимации, подобной этой здесь.

Я пытался создать это с помощью пакета react-transition-group.

Моя проблема

В настоящее время мне удалось заставить его работать только с entering dom, НО это при переносе всего Confirm.jsx компонента. Это не идеально, потому что это означало бы, что каждый раз, когда я хочу использовать Confirm.jsx где-то в своем приложении, я также должен обернуть его <CSSTransition> компонентом.

Итак, в идеале я хочу добавить <CSSTransition> компонент либо в Confirm.jsx или Dialog.jsx , но что бы я ни пытался, я не могу заставить их работать.

Чего мне здесь не хватает?

Вот небольшое изменение, которое я внес.

Я переместил CSSTransition в ваш Confirm компонент и удалил ранние возвраты в Confirm Dialog open состояние и когда false

Вы ничего не возвращали, когда open для состояния установлено значение null. Это отменяло вашу анимацию выхода. CSSTransition должен иметь что-то для рендеринга, чтобы он мог добавлять классы анимации выхода при выходе. После завершения анимации CSSTransition удаляет дочерний элемент из DOM, поскольку вы уже установили свойство unmountOnExit