不改变组件的ReactCSSTransitionGroup

Question

我有一个组件，当它的支柱ReactCSSTransitionGroup发生变化时，可以在它的stage中切换子组件。当页面加载时，transitionAppear可以正常工作，但不存在转换、保留或转换，输入动画用于当道具更改/当ReactCSSTransitionGroup中的组件发生变化时。当stage从'CONTENT'变为'BOOKING'时，Content组件应该会淡出，而Booking组件会逐渐消失。

页面组件：

import React, {PropTypes} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

export default class Page extends React.Component {
    static propTypes = { stage: PropTypes.string };

    getComponent(stage) {
        switch (stage) {
            case 'CONTENT': {
                return (
                    <Content />
                );
            }
            case 'BOOKING': {
                return (
                    <Booking />
                );
            }
        }
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.stage !== this.props.stage;
    }

    render() {
        return (
            <div>
                <ReactCSSTransitionGroup
                    transitionName='component-fade'
                    transitionAppear={true}
                    transitionEnter={true}
                    transitionLeave={true}
                    transitionEnterTimeout={500}
                    transitionAppearTimeout={500}
                    transitionLeaveTimeout={500}
                    component='div'
                >
                    {this.getComponent(this.props.stage)}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
}

CSS：

.component-fade-enter {
    opacity: 0;
    transform: translateY(+2em);
}

.component-fade-enter.component-fade-enter-active {
    opacity: 1;
    transform: translateY(0em);
    transition: opacity 200ms ease-out, transform 200ms ease-in;
}

.component-fade-leave {
    transform: translateY(0em);
    opacity: 1;
}

.component-fade-leave.component-fade-leave-active {
    transform: translateY(+2em);
    opacity: 0;
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.component-fade-appear {
    opacity: 0;
    transform: translateY(+2em);
}

.component-fade-appear.component-fade-appear-active {
    opacity: 1;
    transform: translateY(0em);
    transition: opacity 200ms ease-out, transform 200ms ease-in;
}

Answer 1

找到了我自己问题的答案，只需要在组件中添加一个div包装器，这些组件的键随着this.props.stage的变化而发生变化。

<ReactCSSTransitionGroup
    transitionName='component-fade'
    transitionAppear={true}
    transitionEnter={true}
    transitionLeave={true}
    transitionEnterTimeout={500}
    transitionAppearTimeout={500}
    transitionLeaveTimeout={500}
    component='div'
>
    <div key={this.props.stage}>
        {this.getComponent(this.props.stage)}
    </div>
</ReactCSSTransitionGroup>