使用React Router具有动态内容的React Transition Group动画

Question

我正在尝试制作一个动画，该动画在react-router的出口更改时触发。

应用了初始样式opacity: 0，但是Transition从未遇到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>
        );
    }
}