条件付きレンダリングとReactCSSTransitionGroupアニメーション

Question

私は、Redux状態に基づいてさまざまなコンポーネントをレンダリングする小さなアプリケーションを作成しました。私はコンポーネントのレンダリング時に「フェード」アニメーションを適用したい。しかし、何らかの理由で、私にとってはうまくいかない。

content.js私が追加および削除されReactCSSTransitionGroupがアイテムに使用されて見てきました

.fade-enter { 
    opacity: 0.01; 
} 

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

.fade-leave { 
    opacity: 1; 
} 

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

class Content extends Component { 
    render() { 
    const transitionOptions = { 
     transitionName: "fade", 
     transitionEnterTimeout: 500, 
     transitionLeaveTimeout: 500 
    } 

    if (this.props.page === 'one') { 
     return (
     <div> 
      <ReactCSSTransitionGroup {...transitionOptions}> 
      <Comp1/> 
      </ReactCSSTransitionGroup> 
     </div> 
    ); 
    } else { 
     return (
     <div> 
      <ReactCSSTransitionGroup {...transitionOptions}> 
      <Copm2/> 
      </ReactCSSTransitionGroup> 
     </div> 
    ); 
    } 
    } 
} 

のstyle.css：ここでは私がこれまで持っているものですリストを作成しましたが、条件付きレンダリングに使用されているその1つの例は見つかりませんでした。それは達成可能ですか？多分、これを行う別のアドオンがありますか？

Answer 1

この同じ問題が何度も投稿されています。一言で言えば、を<ReactCSSTransitionGroup>の中に条件付きでレンダリングする必要があります。<ReactCSSTransitionGroup>ではありません。 <ReactCSSTransitionGroup>は一度マウントしてから滞在する必要があります。子供が追加され、削除されます。あなたも<ReactCSSTransitionGroup>の内側にそれぞれの子にユニークkey小道具を追加する必要があります

content.js

class Content extends Component { 
    render() { 
    const transitionOptions = { 
     transitionName: "fade", 
     transitionEnterTimeout: 500, 
     transitionLeaveTimeout: 500 
    } 

    let theChild = undefined; 
    if (this.props.page === 'one') { 
     theChild = <Comp1 key="comp1" />; 
    } else { 
     theChild = <Comp2 key="comp2" />; 
    } 

    return (
     <div> 
      <ReactCSSTransitionGroup {...transitionOptions}> 
      {theChild} 
      </ReactCSSTransitionGroup> 
     </div> 
    ); 
    } 
} 

注意。これは、コンポーネントが、適切にアニメーションを出し入れするために、どの子供が一意であるかを識別するのに役立ちます。ここで

Answer 2

は、あなたが `componentDidMount（）`ライフサイクル方法であなたのCSSアニメーションを行うことができます私のコード

render() {  
    return (
      <CSSTransitionGroup 
       transitionName="slide" 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={500} 
      > 
      { id === targetID ? (

       <div> 
        <SectionList id={id} /> 
       </div> 

      ) : '' } 
      </CSSTransitionGroup> 
    ) 
}