Question

我刚刚开始使用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动画可能会改变不透明度，但不透明度并不是我尝试改变的唯一因素，这也会影响显示属性。）

Answer 1

一种选择是使用一个框架，比如react-bootstrap，它包含了任何给定项目所需的许多UI组件。它包括一个Fade组件。可以在此处找到文档：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);

Answer 2

一种简单的方法是使用CSS过渡。基本上你只需要在一个元素中添加一个类，并在CSS中定义一个转换，然后为你完成剩下的工作

这里有一个教程

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

在解释如何使用示例和操场让您尝试自己的

方面做得很好

Answer 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;
}

退出组件并将另一个组件退出React.js

3 个答案: