Я не могу оживить всплывающее окно при входе, но не могу оживить при выходе

Question

Приведенный ниже код вызывает всплывающее окно в реакции, которое появляется, когда пользователь нажимает кнопку нового заказа в интерфейсе. При нажатии на кнопку появляется всплывающее окно, но без анимации

export const NewOrder = () => {
    const [selected, setSelected] = useState(false);

    const newOrder = () => {
        setSelected(!selected);
    };

    return (
        <Fragment>
            <div className='dashboard-main-neworder' onClick={newOrder}>
                <img alt='New Order' src={addorder}></img>
                <span>New Order</span>
            </div>
            {selected && <NewOrderForm />}
        </Fragment>
    );
};

Это анимация

@keyframes popup {
    0% {
        top: -100%;
        opacity: 0;
    }
    70% {
        top: 60%;
    }
    100% {
        top: 50%;
        opacity: 1;
    }
}

назначение в классе здесь

.popup {
    width: 55rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: #ffffff;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
    animation: popup ease 0.5s;

Answer 1

Это довольно сложно сделать, потому что, когда вы отключаете компонент с помощью response, он просто удаляет его из дерева, я предлагаю использовать что-то вроде response-transition-group