1

我正在尝试制作一个可点击的内容窗口。单击后，窗口将发生变化。我希望屏幕上的内容淡出，新内容淡入。到目前为止，我已经完成了淡入（我认为）。淡出不会按计划进行。组件被推下屏幕并消失，之后甚至没有褪色。如果需要，我可以将实时版本上传到 GitHub 页面。

我读了这篇文章，我不确定是不是 React 版本搞砸了。我想说不是吗？

无论如何，这是主窗口的渲染功能：

  render: function() {
    if (this.state.window == 'main-window') {
      var result = 
        <div key={'main'} className='contentWindow'>
          <PortalBox portalType={'dev'} handleClick={this.changeToDev}/>
          <PortalBox portalType={'personal'} handleClick={this.changeToPersonal}/>
        </div>;
    } else if (this.state.window == 'dev-window') {
      var result = <DevWindow key={'dev'} handleClick={this.changeToMain}/>;
    } else {
      var result = <PersonalWindow key={'personal'} handleClick={this.changeToMain}/>;
    }
    return (
      <div>
        <Greetings brands={this.props.brands}/>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
          {result}
        </ReactCSSTransitionGroup>
        <Footer/>
      </div>
    );
  }

这是CSS：

.contentWindow {
  width: 100%;
  height: 450px;
  transition: opacity 1000ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear .example-appear-active {
  opacity: 1;
}

.example-enter {
  opacity: 0.01;
}

.example-enter .example-enter-active {
  opacity: 1;
  /*transition: opacity 1000ms ease-in;*/
}

.example-leave {
/*  visibility: hidden;
  height: 0px;
  width: 0px;*/
  opacity: 1;
}

.example-leave .example-leave-active {
  opacity: 0.01;
  /*transition: opacity 1000ms ease-in;*/
}

当我取消注释 .example-leave 下的可见性内容时，我使两个面板之一消失，但不会同时消失。

我正在遵循本指南。

有任何想法吗？我应该尝试做可见性的东西来让两个面板都消失吗？还是我应该尝试一种完全不同的方法？谢谢！

4

0 回答 0