Невозможно войти в выход для реакции, группа перехода только кажется, кажется, работает - PullRequest
Новая
       15

Невозможно войти в выход для реакции, группа перехода только кажется, кажется, работает

0 голосов
/ 12 марта 2019 
return (
        <div>
            <TransitionGroup
                key={currentTime ? currentTime.date.toISOString() : ""}
            >
                <CSSTransition
                    in={true}
                    appear={true}
                    timeout={10000}
                    classNames="fade"
                    unmountOnExit={true}
                >
                    <FulfillmentInfoContainer>
                        {
                            <ul>
                                {currentTime &&
                                    currentTime.tasks.map(task => (
                                        <li key={task.time.toISOString()}>
                                            {task.description} |{" "}
                                            {task.time.toLocaleString(
                                                "en-US",
                                                options
                                            )}{" "}
                                        </li>
                                    ))}
                            </ul>
                        }
                    </FulfillmentInfoContainer>
                </CSSTransition>
            </TransitionGroup>
        </div>
    );

это мой рендер, и единственные стили, которые применяются, когда этот рендер получает новые реквизиты, это appear.Я не вижу ввода выхода где-либо

вот мои стили 

    .fade-exit{
        opacity: 1;
        transform: translateY(0rem);
    }

    .fade-exit.fade-exit-active{
        opacity: 0;
        transform: translateY(-50rem);
        transition: 5000ms linear;
    }

    .fade-exit-done{
        opacity: 0;
        transform: translateY(-50rem);
    }

    .fade-appear{
        opacity: 0;
        transform: translateY(50rem);
        z-index: 1;
    }

    .fade-appear.fade-appear-active{
        opacity:1;
        transform: translateY(0rem);
        transition: 600ms linear;
    }

    .fade-enter{
        opacity: 1;
        transform: translateY(0rem);
    }

    .fade-enter.fade-enter-active{
        opacity: 1;
        transform: translateY(0rem);
        transition: 5000ms linear 5000ms;
    }

в основном я каждый раз, когда мой компонент получает новые реквизиты, я хочу, чтобы старый оставить, переводя до непрозрачности 0,затем пусть новое приходит в переводе снизу вверх, увеличивая непрозрачность.Единственное поведение, которое происходит, это то, что он переводит вверх (появляется), но не выходит с переводом вверх в непрозрачность 0. Стили входа и выхода не работают?почему это?

...