Question

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

我读了这个post并且我不确定是否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下的可见性内容时，我会让两个面板中的一个消失，但不会同时消失。

我正在关注此guide。

有什么想法吗？我是否应该尝试使用可见性来使两个面板消失？或者我应该尝试一种完全不同的方法？谢谢！

React CSSTransitionGroup：组件未按计划消失

0 个答案: