Анимация React Transition Group с динамическим контентом с помощью React Router - PullRequest
Новая
       41

Анимация React Transition Group с динамическим контентом с помощью React Router

0 голосов
/ 02 ноября 2018

Я пытаюсь сделать анимацию, которая срабатывает при изменении выхода реактивного маршрутизатора.

Первоначальный стиль применяется opacity: 0, однако Переход никогда не попадает в стиль opacity: 1. Вот 

const duration = 500;

const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out`,
    opacity: 0,
};

const transitionStyles: any = {
    enter: {
        opacity: 'opacity: 0'
    },
    entered:  {
        color: 'black',
        opacity: 1,
    },
};

export default () => {
    return (
        <div>
            <Transition
                key={DynamicPage.key}
                timeout={duration}>
                {(state) => (
                    <div style={{
                        ...defaultStyle,
                        ...transitionStyles[state]
                    }}>
                        <Route path="*" component={DynamicPage} />
                    </div>
                )}
            </Transition>
        </div>
    );
};

Я пытался позволить компоненту DynamicPage увеличивать значение ключа, чтобы вызвать изменение. Первоначальный компонент отображается, но эта упаковка нарушает содержимое DynamicPage).

Если уместно, вот код DynamicPage 

class DynamicPage extends React.PureComponent {
    public static key = 0;

    public render() {
        DynamicPage.key++;
        return (
            <PageContainer>
                {({ Kind }: any) => {
                    const Page = pages[Kind];
                    return <Page {...this.props}/>;
                }}
            </PageContainer>
        );
    }
}
...