只需使用条件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.5秒增长，之后完成了opacity转换（其中有0.5秒的延迟）将触发，并采取进一步的0.5秒获得opacity 1.对于隐藏它是相反的。

请记住让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。这些值代表的是进入和离开转换的持续时间（以毫秒为单位）。

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

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

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