ReactJS：基于状态淡入 div 和淡出 div答案

【问题标题】：ReactJS: Fade in div and fade out div based on stateReactJS：基于状态淡入 div 和淡出 div
【发布时间】：2017-09-27 21:15:23
【问题描述】：

所以，我试图根据用户单击的按钮淡入和淡出一组输入。我尝试使用 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;
}

【问题讨论】：

标签： reactjs

【解决方案1】：

只需使用条件 class 和 CSS。

有一个state 变量，例如visible。

this.state = {
   visible:false
}

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

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

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

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

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

【讨论】：

您好，谢谢您的回复，我试过了，但它似乎不起作用。过渡似乎不起作用。有<div className={this.state.visible ? 'mainDiv' : 'hide mainDiv'}> 会导致这个问题。 div 确实隐藏了，但是没有过渡...处理双击转换
本质上，我是通过设置 div 的宽度和高度来打开一个 div，然后我想淡入该 div 内的输入
你为什么不使用纯 CSS 解决方案并抛弃 jQuery，这样它就不会干扰 React？我会更新答案。
你能做一个完整的codepen例子吗？你需要在构造函数或超级道具中包装吗？
这简直太完美了。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：