Question

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

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

我想要的是用户按下按钮并输入fadeIn。另一个按钮，输入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;
}

Answer 1

只需使用条件class和CSS。

拥有state变量visible。

this.state = {
   visible:false
}

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

的操作

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

因此，根据state.visible，输入将包含class或fadeIn的{{1}}。

然后只使用简单的CSS

fadeOut

因此每次.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发生时。 CSS中的transition属性基本上是用逗号分隔的所有转换。在转换中，第一个参数是要修改的属性（比如transition，height等），第二个是width，即转换所需的时间，第三个（可选）是{ {1}}即，在启动过渡后多长时间，特定财产的过渡发生了。因此，当transition-duration变为transition-delay时，this.state.visible类会附加到对象上。 true .fadeIn和transition各占0.5秒，因此需要0.5秒才能增长，并在完成height转换后（延迟时间为0.5秒））将触发并再花0.5秒获得width 1.对于隐藏它是相反的。

请务必让按钮上的opacity事件处理opacity的更改。

Answer 2

使用样式化组件实现此目的的简单方法...

const Popup = styled.div`
  width: 200px;
  height: 200px;
  transition: opacity 0.5s;
  opacity: ${({ showPopup }) => (showPopup ? '1' : '0')};
`;

<Popup showPopup={showPopup}>
  {...}
</Popup>

Answer 3

您还可以使用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作为道具。这些值代表输入和离开转换的持续时间（以毫秒为单位）。

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

3 个答案: