将一个组件淡入并淡出另一个组件 React.js答案

【问题标题】：Fading a component in and fading another one out React.js将一个组件淡入并淡出另一个组件 React.js
【发布时间】：2018-02-19 04:33:37
【问题描述】：

我最近才开始使用 React.js，为了让自己更容易，我正在尝试重新创建我过去制作的项目，但我没有像过去那样使用 jQuery，我完全避免使用 jQuery 并且只使用 React。

我倾向于制作一个 div 会淡入的动画，而另一个会像这样淡出：

$("#start").click(function() {
    $("#h1").fadeOut(750);
    $("#h2").delay(500).fadeIn(750);
    $("#h1").css("z-index", 0);
    $("#h2").css("z-index", 1);
});

我想知道如何在没有 jQuery 的情况下重现这种淡入淡出效果

（我知道 CSS 动画可以改变不透明度，但不透明度并不是我想要改变的唯一东西，这也会影响显示属性。

【问题讨论】：

标签： javascript css reactjs animation

【解决方案1】：

一种选择是使用一个框架，例如 react-bootstrap，它包含任何给定项目所需的大量 UI 组件。它包括一个淡入淡出组件。文档可以在这里找到：https://react-bootstrap.github.io/components.html#utilities

class Example extends React.Component {

 constructor(...args) {
  super(...args);
  this.state = {};
 }

 render() {
  return (
    <div>
      <Button onClick={()=> this.setState({ open: !this.state.open })}>
       click
      </Button>
      <Fade in={this.state.open}>
        <div>
          <Well>
            THIS CONTENT WILL FADE
          </Well>
        </div>
      </Fade>
    </div>
  );
 }
}

ReactDOM.render(<Example/>, mountNode);

【讨论】：

【解决方案2】：

一种简单的方法是使用 CSS 过渡。基本上你只需要给一个元素添加一个类，然后在 CSS 中定义一个过渡，剩下的就交给你了

这里有教程

https://www.w3schools.com/css/css3_transitions.asp

这很好地解释了它是如何通过示例和游乐场供您尝试的

【讨论】：

【解决方案3】：

CSS Transition group add-on 可能会有所帮助，它让您可以像这样定义转换：

JS：

<ReactCSSTransitionGroup
  transitionName="example"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
  {items}
</ReactCSSTransitionGroup>

CSS：

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

【讨论】：