Animate React Модальный - PullRequest
Новая
       21

Animate React Модальный

0 голосов
/ 12 октября 2019

В моем веб-приложении есть модал, который я хочу вставить, когда пользователь нажимает кнопку «Открыть». Я использую реагирующая группа перехода , чтобы достигнуть этого. Но я не могу заставить анимацию работать. Не уверен, что здесь не так? 

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%;
}

Здесь - рабочий код.

1 Ответ

1 голос
/ 12 октября 2019

Проблема здесь в том, что реактивный модал использует реактивный портал в качестве своей точки крепления. Поэтому он не отображается как дочерний элемент компонента 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-sirzg

...