React：レンダリングされたコンポーネントの変更をアニメーション化する方法は？

Question

私は、時間間隔でレンダリングされるコンポーネントを変更します。

変更が発生するたびにアニメーションを追加できます。それについて最善の方法は何ですか？

constructor (props) { 
    super(props) 
    this.state = { currentComponent: 1, 
    numberOfComponents: 2} 
} 

componentWillMount() { 
    setInterval(() => { 
     if(this.state.currentComponent === 2) { 
      this.setState({currentComponent: 1}) 
     } else { 
      this.setState({currentComponent: this.state.currentComponent + 1}) 
     } 
    }, 5000) 
} 

render(){ 

    let currentComponent = null; 

    if(this.state.currentComponent === 1) { 
     currentComponent = <ComponentOne/>; 

    } else { 
     currentComponent = <ComponentTwo/>; 
    } 

    return(
     currentComponent 
    ) 
} 

EDIT：

また、「反応-アドオン-CSS-遷移グループの を使用しようとすると、私は次のエラーを取得する：

Answer 1

あなたがReactCSSTransitionGroupで行うことができますこのように提供されたようなものです。section

あなたのCSS：

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 

は、次のようになります。

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 



class MyComponent extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { currentComponent: 1, 
    numberOfComponents: 2} 
    } 

    componentWillMount() { 
    setInterval(() => { 
     if(this.state.currentComponent === 2) { 
      this.setState({currentComponent: 1}) 
     } else { 
      this.setState({currentComponent: this.state.currentComponent + 1}) 
     } 
    }, 5000) 
    } 

    render(){ 

    let currentComponent = null; 

    if(this.state.currentComponent === 1) { 
     currentComponent = <ComponentOne/>; 

    } else { 
     currentComponent = <ComponentTwo/>; 
    } 

    return(
     <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={300}> 
      {currentComponent} 
     </ReactCSSTransitionGroup> 

    ) 
    } 
}