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>一次，保持静态，并且只有条件地渲染其子级。从你的代码很难告诉你什么组件试图进行动画处理，所以我不能给你一个直接的解决方案。但请记住我的解释，你应该能够弄清楚。