ReactCSSTransitionGroup未對組件更改進行動畫處理

我有一個組件在其的支持stage更改時在其ReactCSSTransitionGroup內切換子組件。當頁面加載transitionAppear時可以正常工作，但沒有轉換離開或轉換，請在支柱更改/ ReactCSSTransitionGroup內部組件發生更改時輸入動畫。當從'CONTENT'的stage變化'BOOKING'的Content組件應該淡出，而Booking組件淡入ReactCSSTransitionGroup未對組件更改進行動畫處理

網頁組件：

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

來源

2016-12-27 Karan Jit Singh

想通了答案我自己的問題，只是不得不添加一個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>

來源

2016-12-27 17:27:55

ReactCSSTransitionGroup未對組件更改進行動畫處理

回答

相關問題