CSSTransitionGroupコンポーネントが正しく残らない

Question

ログインボタンをクリックするとフェードインし、閉じるときにフェードアウトするマスクを使用してログインするためのモーダルを作成しようとしています。私はそれを実現するために私たちに「反応遷移グループ」ライブラリを決めました。フェードインはうまく動作しますが、アニメーションが適用されずにすぐにフェードアウトします。どうすればそれを動作させることができますか？

連結成分：

<div> 
       <ModalRoot {...this.props}> 
        <Grid> 
         <Menu {...this.props}/> 
         <div className='wrapper'> 
          <div className='content'> 
           <Form postTodo={this.props.postTodo}/> 
           <ul className='todo-list'> 
            <CSSTransitionGroup 
            transitionName='todo' 
            transitionEnterTimeout={500} 
            transitionLeaveTimeout={300}> 
             {todoItems} 
            </CSSTransitionGroup>  
           </ul> 
          </div> 
         </div> 
        </Grid> 
       </ModalRoot> 
      </div> 

ModalRoot：

const MODAL_COMPONENTS = { 
    LOGIN_MODAL: LoginModal, 
    /* other modals */ 
}; 

const ModalRoot = (props: any) => { 
    const {isVisible, isMaskShown, window} = props.modal; 
    const Modal = MODAL_COMPONENTS[window]; 
    if(!isVisible) { 
     return (
     <div> 
      {props.children} 
     </div> 
    ); 
    } 
    if(isMaskShown) { 
     return (
     <CSSTransitionGroup 
      transitionName='mask' 
      transitionAppear={true} 
      transitionAppearTimeout={500} 
      transitionEnterTimeout={0} 
      transitionLeaveTimeout={300}> 
      <Mask> 
       <Modal key={100} hideModal={props.hideModal} /> 
       {props.children} 
      </Mask> 
     </CSSTransitionGroup> 
    ); 
    } 
    if(!isMaskShown) { 
     return (
     <div> 
      <Modal hideModal={props.hideModal}/> 
      {props.children} 
     </div> 
    ); 
    } 
}; 

LoginModal：

const LoginModal = ({hideModal,presets}) => { 

    return (
     <div className='login-modal'> 
      <button onClick={hideModal} className='close'>X</button> 
     </div> 
    ); 
}; 

CSS：

.mask { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: black; 
    opacity: 0.75; 
} 

.mask-leave { 
    opacity: 0.75; 
} 

.mask-leave.mask-leave-active { 
    opacity: 0; 
    transition: opacity 300ms ease-in; 
} 

.mask-appear { 
    opacity: 0; 
} 

.mask-appear.mask-appear-active { 
    opacity: 0.75; 
    transition: opacity .5s ease-in; 
} 

Answer 1

<CSSTransitionGroup>は、<CSSTransitionGroup>の子コンポーネントの子であるコンポーネントのマウントとアンマウントのみを処理します。 <CSSTransitionGroup>をマウントまたはアンマウントすることは想定されていません。あなたはその子をマウントまたはアンマウントすることになっています。

フェードインする理由は、<CSSTransitionGroup>が最初にマウントされたときに「表示」アニメーションをレンダリングさせるように、transitionAppear={true}という小道具を指定したためです。しかし、あなたのisMaskShown変数がtrueからfalseになるとき、<CSSTransitionGroup>は即座にアンマウントされ、 "leave"トランジションがアニメーション化されることはありません。 - もう一度 - <CSSTransitionGroup>は、それの中に直接。

解決策は、<CSSTransitionGroup>を1度だけマウントし、静的にして、条件付きで子をレンダリングすることです。どのコンポーネントからアニメーションを出し入れしようとしているのかをコードから判断するのは難しいので、私はあなたに直接的な解決策を与えることはできません。しかし、私の説明を念頭に置いて、それを理解できるはずです。