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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (460)

所以,我试图根据用户点击的按钮淡入并淡出一组输入。我尝试使用jQuery,但是,div正在逐渐消失并以相同的速度逐渐消失......

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

我想要的是用户按下按钮和输入淡入。另一个按钮,输入fadeOut。我不介意使用jQuery,但我想了解如何做反应。

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输入都会有classfadeInfadeOut

然后只使用简单的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改变类更改并且发生转换时。 CSS中的transition属性基本上是用逗号分隔的所有转换。 在转换中,第一个参数是要修改的属性(比如高度,宽度等),第二个参数是转换持续时间,它是转换所需的时间,第三个参数是转换延迟,即转换后的时间。 已经启动了特定财产的过渡。 因此,当this.state.visible变为true时,.fadeIn类将附加到该对象。 过渡的高度和宽度各占0.5秒,因此需要0.5秒才能增长,完成后不透明度过渡(延迟为0.5秒)将触发并再花0.5秒获得不透明度。 隐藏它是相反的。

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

用户回答回答于

您也可以使用CSSTransitionGroup实现此目的

const Example = ({items, removeItemHandler}) => {
  return (
    <div>
      <CSSTransitionGroup transitionName="fadeInput"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
        {this.renderInputs().map(function(input) {
          return (
            <div key={input.id} className="my-item" onClick={removeItemHandler}>
              {item.name}
            </div>
          );
        })}
      </ReactCSSTransitionGroup>
    </div>
  );
};

使用React时,有时您希望在安装组件之后直接为组件设置动画,或者在组件卸载之前直接为组件设置动画。就像在您的示例中一样,假设您映射了一个对象数组并在应用程序中呈现一个列表。现在假设您要添加动画以淡入添加到阵列中的新项目,或者在从阵列中删除项目时淡出项目。CSSTransitionGroup组件将transitionEnterTimeout和transitionLeaveTimeout作为props。这些值表示的是进入和离开转换的持续时间(以毫秒为单位)。

扫码关注云+社区

领取腾讯云代金券