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>本身，你應該掛載或卸載它的孩子。

它淡入但不褪色的原因是因爲您已指定道具transitionAppear={true}，這會導致<CSSTransitionGroup>在第一次安裝時呈現「出現」動畫。但是，當您的isMaskShown變量從true變爲false時，請考慮渲染函數內部會發生什麼情況：<CSSTransitionGroup>會立即卸載，而沒有機會對「離開」轉換進行動畫製作，因爲 - 再次 - <CSSTransitionGroup>只會動畫組件直接在裏面。

解決方法是隻安裝<CSSTransitionGroup>一次，保持靜態，並且只有條件地渲染其子級。從你的代碼很難告訴你什麼組件試圖進行動畫處理，所以我不能給你一個直接的解決方案。但請記住我的解釋，你應該能夠弄清楚。