почему исходные элементы не переносятся с помощью useTransition - PullRequest
Новая
       16

почему исходные элементы не переносятся с помощью useTransition

1 голос
/ 02 апреля 2019

Я использую реагирующий переход пружины useTransition для перехода между страницами, например так: 

    const context = useContext(AppContext);
    const items = [context.page];
    const transitions = useTransition(items, item => item.label, {
        initial: {
            transform: 'translate3d(0,0,0)',
            opacity: 0.2,
        },
        from: {
            transform: 'translate3d(100%,0,0)',
            opacity: 1,
        },
        enter: { transform: 'translate3d(0,0,0)', opacity: 1 },
        leave: { transform: 'translate3d(-100%,0,0)', opacity: 1 },
    });

    return (
        <div className="app-content">
            {transitions.map(({ item, props, key }) => (
                <animated.div key={key} style={props}>
                    {renderPage(item.label)}
                </animated.div>
             )}
        </div>
    );
...

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

Итак, как мне получить исходную страницу для перехода, как на других?

edit:Добавлены коды и поле , показывающие проблему.

1 Ответ

0 голосов
/ 02 апреля 2019

Если я правильно понимаю ваши намерения, вы можете просто установить transform в исходном объекте, чтобы он начинался с -0%: 

initial: {
  transform: "translate3d(-0%,0,0)",
  opacity: 0.2
},
...