ReactJS:根据状态淡入 div 和淡出 div [英] ReactJS: Fade in div and fade out div based on state

问题描述

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

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

我想要的是用户按下一个按钮并输入淡入淡出.另一个按钮，输入淡出.我不介意使用 jQuery，但我想了解如何使用 react 来做到这一点.

renderInputs() {if (this.state.addType === "image") {返回 (<div className="addContainer"><input type="text" className="form-control"/>

)} 别的 {返回 (其他输入)}}使成为() {返回 (<CSSTransitionGroup过渡名称=淡入淡出"transitionEnterTimeout={500}transitionLeaveTimeout={300}>{this.renderInputs()}//这不起作用，但我希望此内容是有条件的.</CSSTransitionGroup>)}//SCSS.fadeInput-输入{不透明度:0.01；}.fadeInput-enter.fadeInput-enter-active {不透明度:1；过渡:不透明度 500 毫秒缓入；}.fadeInput-离开{不透明度:1；}.fadeInput-leave.fadeInput-leave-active {不透明度:0.01；过渡:不透明度 300 毫秒缓入；}

解决方案

只需使用条件 class 和 CSS.

有一个 state 变量，比如 visible.

this.state = {可见:假}

对于其他输入做类似的事情

因此，根据 state.visible，输入将具有 fadeIn 或 fadeOut 的 class.

然后只需使用简单的 CSS

.fadeOut{不透明度:0;宽度:0；高度:0；过渡:宽度0.5s 0.5s，高度0.5s 0.5s，不透明度0.5s；}.淡入{不透明度:1；宽度:100px；高度:100px；过渡:宽度0.5s，高度0.5s，不透明度0.5s 0.5s；}

因此，每次 state.visible 更改时，class 都会更改并且 transition 发生.CSS 中的 transition 属性基本上是所有的过渡用逗号分隔.在转换中，第一个参数是要修改的属性(比如 height、width 等)，第二个参数是 transition-duration 即时间用于转换，第三个(可选)是 transition-delay ，即在启动转换后特定属性的转换发生的时间.因此，当 this.state.visible 变为 true 时，.fadeIn 类将附加到对象.transition 有 height 和 width 各取 0.5s，因此需要 0.5s 来增长，完成后 opacity 转换(有 0.5 秒的延迟)将触发并再花费 0.5 秒以获得 opacity 1.对于隐藏，则相反.

记得让按钮上的 OnClick 事件处理 this.state.visible 的变化.

So, I am trying to fade in and fade out a set of inputs based on what button the user clicks. I tried using jQuery, but, the div was fading in and fading out at the same speed...

I am using es6 classes and react.

What I want is the user to press a button and the inputs fadeIn. Another button, the inputs fadeOut. I don't mind using jQuery, but I would like to understand how to do this with 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;
}

解决方案

Just use a conditional class and CSS.

Have a state variable like visible.

this.state = {
   visible:false
}

And for the other inputs do something like

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

So depending upon the state.visible the input will have a class of either fadeIn or fadeOut.

And then just use simple 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;

}

So every time the state.visible changes the class changes and the transition takes place. The transition property in CSS is basically all the transitions separated by commas. Within the transition the first argument is the property to be modified (say height, width etc), second is transition-duration that is the time taken for the transition and third(optional) is transition-delay ie how much time after the transition has been initiated does the transition for the particular property take place. So when this.state.visible becomes true the .fadeIn class is attached to the object. The transition has height and width taking 0.5s each so that will take 0.5s to grow and after it is finished the opacity transition (which has a delay of 0.5s) will trigger and take a further 0.5s to get opacity 1. For the hiding it's the reverse.

Remember to have the OnClick event on the button handle the changing of this.state.visible.

这篇关于ReactJS:根据状态淡入 div 和淡出 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！