CSSTransitionGroup 组件没有正确离开

Question

我正在尝试创建一个用于登录的模式，该模式在您单击登录按钮时淡入并在您关闭它时淡出。我决定让我们使用“react-transition-group”库来实现它。淡入效果很好，但它会立即淡出，而没有应用动画。我怎样才能让它发挥作用？

连接组件：

<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>

模态根：

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>  
      );
    }
};

登录模式：

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>，使其保持静态，并且仅有条件地渲染其子项。很难从您的代码中分辨出您要对哪个组件进行动画处理，因此我无法为您提供直接的解决方案。但是请记住我的解释，您应该能够弄清楚。