ReactJS：淡入div并根据状态淡出div

  • Z时代
  • 2024-01-10
  • 分类：问答

因此，我试图根据用户单击的按钮淡入和淡出一组输入。我尝试使用jQuery，但是div以相同的速度渐入渐出…

我正在使用es6类并做出反应。

我想要的是用户 。我不介意使用jQuery，但我想了解如何通过React做到这一点。

renderInputs() {
  if (this.state.addType === "image") {
    return (
      <div className="addContainer">
        <input type="text" className="form-control" />
      </div>
    )
  } else {
    return (
     other inputs
    )
  }
}
render() {
  return (
    <CSSTransitionGroup
      transitionName="fadeInput"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>
      {this.renderInputs()} // this doesn't work but I want this content to be conditional.
    </CSSTransitionGroup>
  )
}
// SCSS
.fadeInput-enter {
  opacity: 0.01;
}
.fadeInput-enter.fadeInput-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fadeInput-leave {
  opacity: 1;
}
.fadeInput-leave.fadeInput-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

回答：

只需使用条件class和CSS。

有一个state像这样的变量visible。

this.state = {
   visible:false
}

对于其他输入，请执行类似

<input className={this.state.visible?'fadeIn':'fadeOut'} />

所以，这取决于state.visible输入都会有class任fadeIn或fadeOut。

然后只需使用简单的CSS

.fadeOut{
     opacity:0;
     width:0;
     height:0;
     transition: width 0.5s 0.5s, height 0.5s 0.5s, opacity 0.5s;
}
.fadeIn{
     opacity:1;
     width:100px;
     height:100px;
     transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
}

因此，每次state.visible更改都会发生class更改并transition发生。transitionCSS中的属性基本上是所有以逗号分隔的过渡。在过渡中，第一个参数是要修改的属性（例如height，width等等），第二个是transition-

duration过渡所花费的时间，而第三个参数（可选）是指transition-

delay在过渡开始后针对特定对象进行过渡的时间财产发生。因此，当this.state.visible成为类时true，.fadeIn该类将附加到对象。分别transition具有height和的时间width为0.5s，因此将需要0.5s的时间增长，完成opacity转换后（延迟为0.5s）将触发并再花费0.5s的时间来获得opacity

1.隐藏是相反的。

请记住，让OnClick按钮上的事件处理的更改this.state.visible。

以上是 ReactJS：淡入div并根据状态淡出div 的全部内容， 来源链接： utcz.com/qa/417436.html

回到顶部