Animate React Modal

У меня есть Modal в моем веб-приложении, которое я хочу скользить, когда пользователь нажимает кнопку "открыть". Для этого я использую react-transition-group. Но я не могу заставить анимацию работать. Не уверен, что здесь не так?

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Modal from 'react-modal';

import './styles.css';

class Example extends React.Component {
  state = {
    isOpen: false,
  };

  toggleModal = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen,
    }));
  };
  render() {
    const modalStyles = {
      overlay: {
        backgroundColor: '#ffffff',
      },
    };
    return (
      <div>
        <button onClick={this.toggleModal}>
          Open Modal
        </button>
        <CSSTransition
          in={this.state.isOpen}
          timeout={300}
          classNames="dialog"
        >
          <Modal
            isOpen={this.state.isOpen}
            style={modalStyles}
          >
            <button onClick={this.toggleModal}>
              Close Modal
            </button>
            <div>Hello World</div>
          </Modal>
        </CSSTransition>
      </div>
    );
  }
}

CSS-файл:

.dialog-enter {
  left: -100%;
  transition: left 300ms linear;
}
.dialog-enter-active {
  left: 0;
}
.dialog-exit {
  left: 0;
  transition: left 300ms linear;
}
.dialog-exit-active {
  left: -100%;
}

Вот рабочий код.


reactjs css react-modal
person darKnight    schedule 12.10.2019    source источник

Ответы (1)


arrow_upward
25
arrow_downward

Проблема здесь в том, что react-modal использует в качестве точки монтирования react-portal. Таким образом, он не отображается как дочерний элемент компонента CSSTransition. Таким образом, вы не могли использовать с ним CSSTransition.

Вы можете использовать некоторые пользовательские CSS для создания эффектов перехода. Он находится в документации по модальному модулю.

Итак, если вы добавите это в свой css. Будет переход.

.ReactModal__Overlay {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 500ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
  transform: translateX(0px);
}

.ReactModal__Overlay--before-close {
  opacity: 0;
  transform: translateX(-100px);
}

И мы должны добавить свойство closeTimeoutMS в модальное окно, чтобы анимация закрытия работала.

      <Modal
        closeTimeoutMS={500}
        isOpen={this.state.isOpen}
        style={modalStyles}
      >

https://codesandbox.io/s/csstransition-component-forked-7jiwn

person Peter Ambruzs    schedule 12.10.2019
comment
Это некоторый прогресс, но эффект затухания не работает при закрытии модального окна. Можем ли мы как-то этого добиться? Мне удалось добиться эффекта «слайд-ин». Ссылка на код: codesandbox.io/s/csstransition-component-11mew - person darKnight; 12.10.2019
comment
Я использую CSSTransition в поле внутри модального окна, чтобы анимировать его непрозрачность. Коробка является прямым дочерним элементом Modal. Но это не работает. Вы можете выяснить причину? codesandbox.io/s/csstransition-component-z1y2r . Спасибо - person darKnight; 12.10.2019
comment
Я не знаком с CSSTransition, но я бы проверил его свойство classNames, действительно ли оно должно быть «модальным»? - person Peter Ambruzs; 12.10.2019
comment
Я думаю, что синтаксис правильный. Проверьте это reactcommunity.org/react-transition-group/css-transition - person darKnight; 12.10.2019