ReactCSSTransitionGroupがコンポーネント変更時にアニメーション化しない

Question

が変更されたときに子コンポーネントをReactCSSTransitionGroupに切り替えるコンポーネントがあります。 ページがロードされるときtransitionAppearはうまく動作しますが、プロップが変更されたときのトランジション・リーブまたはトランジション・アニメーションがありません。ReactCSSTransitionGroupのコンポーネントが変更されたときにアニメーションを入力します。 Bookingコンポーネントがフェードインしながら、とき'CONTENT''BOOKING'からstage変更はContentコンポーネントがフェードアウトする必要があり

ページコンポーネント：。

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

は自分の質問への答えを考え出しましたキーの変更がthis.props.stageのように変更されたコンポーネントにdivラッパーを追加するだけでした。

<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>