Question

我尝试创建一个用于登录的模式，当您单击登录按钮时，该模板会淡入，当您关闭它时淡出。我决定向我们做出反应 - 过渡组＆＃39;实现它的库。淡入淡出工作正常，但它会立即消失，不会应用动画。我怎样才能使它发挥作用？

连接组件：

<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>一次，保持静态，并且只有条件地渲染其子节点。很难从你的代码中判断出你试图动画的组件是什么，所以我不能给你一个直接的解决方案。但请记住我的解释，你应该能够弄明白。

CSSTransitionGroup组件没有正确离开

1 个答案: