Как сделать так, чтобы переходы CSS проходили в противоположных направлениях в модальном режиме? - PullRequest
Новая
       59

Как сделать так, чтобы переходы CSS проходили в противоположных направлениях в модальном режиме?

0 голосов
/ 04 ноября 2019

Я пытаюсь создать модальный элемент в React. Я понял, как создать сам модал, но у меня проблемы с эффектами перехода. Мой модал состоит из списка li слева и некоторой затемненной области справа. Мне бы хотелось, чтобы переход li был слева, в то время как затемненная область должна переходить справа или появляться после завершения перехода li.

Проблема заключается в том, что после добавления переходов CSSк li переходы не работают. Это код: 

import React from "react";
import styled from "styled-components";

const Root = styled.div`
  position: fixed;
  flex-direction: row;
  display: none;
  border-top: 2px solid #001b24;
  top: 46px;
  left: -900px;
  height: 100%;
  width: 100%;
  z-index: 2;

  a {
    color: #fff !important;
  }

  @media (max-width: 400px) {
    display: flex;
  }
`;

const Overlay = styled.div`
  position: ${({ position }) => position || "fixed"};
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 80%;
  background: rgba(0, 0, 0, 0.5);
  z-index: ${({ zIndex }) => zIndex || 2};
`;

class Modal extends React.Component {
  state = { open: false };

  onClick = () => {
    this.setState(({ open }) => ({ open: !open }));
  };

  render() {
    const { open } = this.state;
    return (
      <div>
          <button onClick={this.onClick}>Open</button>
        <Root style={{ left: open && 0 }}>
            <div
            style={{
                width: "80%",
                position: "fixed",
                transition: "left 2.5s",
                transitionTimingFunction: "ease-out",
                transform: "translateY(0)",
                overflowY: "auto"
            }}
            >
            <nav>
                <ul style={{ backgroundColor: 'green'}}>
                <li>some content</li>
                <li>some content</li>
                </ul>
            </nav>
            </div>
            {open && (
            <div style={{ transition: "right 0.5s" }}>
                <Overlay position="absolute" onClick={this.onClick} zIndex={1} />
            </div>
            )}
        </Root>
      </div>
    );
  }
}

export default Modal;

Однако, если я добавлю переходы к элементу Root, переходы сработают, и элемент Root плавно отобразится слева, включая затемненную область, что не являетсяхотеть. Чего мне не хватает?

...