CSSTransitionGroupの置き換え

Question

コンテンツがの場合、クライアントがDOMのに置き換えられたときに、クライアントがスライドインとアウトを見ることができるようにしようとしています。これは、CSSTransitionGroup内のイメージのsrcを切り替えるだけです。 IMGはは、それが取り付けられていたら、残すアクションが起動していないよう削除されていないので

  <CSSTransitionGroup 
       component='div' 
       className='image-container' 
       transitionName='slide-in' 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={500} 
      > 
       {this.props.name?<img src={this.state.img}/>:null} 
      </CSSTransitionGroup> 

。要素置き換えでLeaveが起動するようにする方法は何ですか？

Answer 1

推測したように、CSSTransitionGroupの内部要素は、機能するためにマウントまたはアンマウントする必要があります。要素のプロパティを変更するだけでは不十分です。

幸運なことに、実際に内部コンポーネントをマウントまたはアンマウントすることはまったく必要ではありません。 CSSTransitionGroupはkeyプロパティを使用して要素を識別し、要素のクローンやアニメーションの必要性を判断します。 keyは、一種の一意の識別文字列でなければならず、そのkey文字列が変更された場合、CSSTransitionGroupに関する限り、コンポーネントを単体でアンマウントしただけです。 this.state.img変更、それはkeyプロパティを変更して、アニメーションをトリガする必要があるとき今

 <CSSTransitionGroup 
      component='div' 
      className='image-container' 
      transitionName='slide-in' 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={500} 
     > 
      {this.props.name?<img key={this.state.img} src={this.state.img}/>:null} 
     </CSSTransitionGroup> 

：

はこれを試してみてください。

注：この「トリック」を使用していないときでも、CSSTransitionGroup内の要素には必ずkey小道具を使用する必要があります。 CSSTransitionGroupは、正常に機能するためにはその子に対してその小道具を必要とします。

From the docs：

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