почему мой CSS переход не работает в реакции - PullRequest
Новая
       5

почему мой CSS переход не работает в реакции

0 голосов
/ 18 февраля 2020

Мой css переход не работает правильно

когда я нажимаю кнопку, div сразу исчезает ...

Я тоже пробовал анимацию.

Но когда анимация заканчивается, ширина сразу становится равной 0.

реагирует 

const NaviDrawer = ({ naviData, show }) => {
    return (
        <div className={`navi container${show ? " show" : " hide"}`}>
            {naviData.map((item, index) => {
                return item.initIdentity === permissionTypes.ADMIN ? (
                    <AdminNaviItem key={item.id} id={item.id} path={item.path} />
                ) : (
                    <UserNaviItem key={item.id} id={item.id} path={item.path} />
                );
            })}
        </div>
    );
};

css

.navi.container {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    height: calc(100% - 70px);
    overflow: hidden;
    width: 300px;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    transition: width 2s linear;
}

.navi.container.hide {
    width: 0px;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    transition: width 2s linear;
}

1 Ответ

0 голосов
/ 18 февраля 2020

Для начального состояния достаточно иметь параметр transition в правиле css, поэтому просто удалите transition: width 2s linear; и аналогичные (с префиксами версии) из .navi.container.hide

...