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>在第一次播放时渲染"appear"动画坐骑。但是，当您的 isMaskShown 变量从 true 变为 false 时，请考虑渲染函数内部发生的情况：<CSSTransitionGroup> 立即卸载，没有机会为 "leaving" 过渡，因为 - 再一次 - <CSSTransitionGroup> 仅对直接位于其中的 组件进行动画处理 .

解决方案是仅挂载您的 <CSSTransitionGroup> 一次，保持静态，并且仅有条件地渲染其子项。很难从您的代码中判断出您要对哪个组件进行动画处理，因此我无法为您提供直接的解决方案。不过记住我的解释，你应该能看懂。

CSSTransitionGroup 组件没有正确离开

CSSTransitionGroup component doesn't leave properly

reactjs

redux

react-redux

reactcsstransitiongroup

react-transition-group