ReactTransitionGroupを使用して更新時のトランジションを作成できますか？

Question

component docsを見ると、反応成分には、ライフサイクルで3つのアイテム、mount,unmountおよびupdateがあります。 React transition groupsは、リアクションでトランジションとアニメーションを適用する最も一般的な方法のようです。アップデート時にも使用できますか（つまり状態変更）、アイテムがマウント/アンマウントされている場合にのみ使用できますか？

Answer 1

はい、状態の変化にトランジションを追加できます。状態更新時に変更される子要素のキーを提供する必要があります。 docsから

：

あなたは、単一の項目のみをレンダリングする場合でも、ReactCSSTransitionGroupのすべての子供たちのためにキー属性を提供しなければなりません。これはReactがどんな子供たちが入ったり、放置したり、滞在したかを決定する方法です。

したがって、あなたがこのような何か行うことができます。

class Container extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     number: 0 
    }; 
    } 

    handleClick(e){ 
    this.setState({number: this.state.number + 1}); 
    } 

    render(){ 

    return (
     <div className='container'> 
     <CSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
       <div className="number" key={this.state.number}>{this.state.number}</div> 
     </CSSTransitionGroup> 
     <button onClick={this.handleClick.bind(this)}>Click Me!</button> 
     </div> 
    ) 
    } 
} 

React.render(<Container />, document.getElementById('container')); 

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

.example-appear { 
    opacity: 0.01; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
    transition: opacity .5s ease-in; 
} 

Here is fiddle.