1

我正在尝试创建一个模式，用于使用当您单击登录按钮时淡入并在您关闭它时淡出的掩码登录。我决定让我们使用“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;
}
4

1 回答 1

6

<CSSTransitionGroup>仅处理作为组件子级的<CSSTransitionGroup>组件的安装和卸载动画。你不应该安装或卸载它<CSSTransitionGroup>自己，你应该安装或卸载它的孩子。

它淡入但不淡出的原因是因为您指定了 prop transitionAppear={true}，这会导致<CSSTransitionGroup>在首次安装时呈现“出现”动画。但是，当您的isMaskShown变量从true变为时false，请考虑在您的渲染函数内部发生了什么：<CSSTransitionGroup>立即卸载，没有机会为“离开”过渡设置动画，因为 - 再一次 -<CSSTransitionGroup>只为直接在其中的组件设置动画。

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

于 2017-07-25T22:32:37.757 回答