React Hooks Drawer Меню не отображается CSS Переход - PullRequest
Новая
       16

React Hooks Drawer Меню не отображается CSS Переход

0 голосов
/ 28 января 2020

Мой Меню работает, кроме переходов css. Я думаю, что происходит, когда я изменяю значение menuOpen (которое является useState), DOM повторяется, и переход никогда не происходит. Как мне это остановить? Я думаю, что мне нужно использовать useRef, который у меня уже есть, но не знаю, как?

Компонент моей страницы с белым div, который будет выдвижным ящиком: 

    import React, { useState, useEffect, useRef } from 'react';

        import { Typography } from '@material-ui/core';

        import './page.css';

        function Page({ someProps }) {
            const [ menuOpen, setMenuOpen ] = useState(false);
            const menuRef = useRef();

            const handleMenuClick = () => {
                setMenuOpen(!menuOpen);
                console.log('MENU CLICKED!!!!!!!!!!!!!!!!!!!!', menuOpen);
            };

            const handleClickOutside = (event) => {
                console.log('CLICKED!!!!!!!!!!!!!!!!!!!!', event, menuRef.current);

                if (menuRef.current && !menuRef.current.contains(event.target) && menuOpen === true) {
                    setMenuOpen(false);
                }
            };

            useEffect(
                () => {
                    document.addEventListener('click', handleClickOutside, false);
                    return () => {
                        document.removeEventListener('click', handleClickOutside, false);
                    };
                },
                [ menuOpen ]
            );

            return (
                <Typography className="screen">
<div className="menuButton" onClick={handleMenuClick}>
                    MENU
                </div>
                    {menuOpen && <div ref={menuRef} className={`menuContainer ${menuOpen === true ? 'isOpen' : ''}`} />}
                </Typography>
            );
        }

        export default Page;

Моя страница. css: 

.menuContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background-color: white;
    z-index: 1;
    transition: margin 1s ease-in;
    margin: 0 0 0 -250px;
}

.menuContainer.isOpen {
    margin: 0 0 0 0px;
    transition: margin 2s;
}
...