Реакция CSSTransition не анимация - PullRequest
Новая
       38

Реакция CSSTransition не анимация

3 голосов
/ 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 {
  opacity: 0;
  transition: opacity 500ms linear;
}
.dialog-enter-active {
  opacity: 1;
}
.dialog-exit {
  opacity: 0;
}
.dialog-exit-active {
  opacity: 1;
}

.box {
  width: 200px;
  height: 100vh;
  background: blue;
  color: white;
}

Здесь - рабочий код. Нажмите «Открыть модал», чтобы открыть модал, а затем нажмите «Переключить ящик», чтобы открыть / закрыть окно, которое я хочу анимировать.

РЕДАКТИРОВАТЬ: Я на самом деле пытаюсь получить окно слайд ивыдвигается при переключении. Вот

обновленный CSS: 

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

.box {
  position: absolute;
  width: 200px;
  height: 50vh;
  background: blue;

Обновленный код ссылка

1 Ответ

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

Вы должны полностью доверять монтирование / размонтирование CSSTransition. 

  <CSSTransition
    in={this.state.boxVisible}
    timeout={1500}
    classNames="dialog"
    unmountOnExit
  >
    <div>
      <div className="box">Box</div>
    </div>
  </CSSTransition>

См. Здесь: https://codesandbox.io/s/csstransition-component-9obbb

ОБНОВЛЕНИЕ: Если вы хотите переместитьэлемент со левым свойством css, как вы просили в комментарии. Вы также должны добавить к этому позицию: реалистичный стиль. 

.dialog-enter {
  left: 100%;
  transition: left 1500ms;
  position: relative;
}
.dialog-enter-active {
  left: 0;
}
.dialog-exit {
  left: 0;
  transition: left 1500ms;
  position: relative;
}
.dialog-exit-active {
  left: 100%;
}
...