Javascript CSS过渡高度和填充

我有一个固定高度的子组件，我想使用transition:height对其进行动画设置

这工作得很好，但是所讨论的组件也有一个边框顶部和一些填充顶部。这不包括在高度过渡中，因此过渡不平滑

输入时，边框和填充立即可见，然后组件的其余部分按预期显示

我的问题: 如何在“过渡：高度”规则中包含填充和边框的高度，或者是否有其他方法可以消除此问题

任何post jsbin world的源文件副本： 反应组分：

var Box = React.createClass({
  getInitialState: function () {
      return {
          open: false
      };
  },
  render: function () {
    var stuffs = this.state.open ? <div className="sub" /> : null;

    return (
      <div className="box">
        <button onClick={this.toggle}>Click Me</button>
        <span>{'Open: ' + this.state.open}</span>
        <CssTransitionGroup transitionName="slider">
          {stuffs}
        </CssTransitionGroup>
      </div>
    );
  },
  toggle: function () {
      this.setState({
          open: !this.state.open
      })
  }
});

您有两种选择：

过渡边框和填充，使它们一起折叠。 将目标div包装在新容器中，并设置其高度的动画。您将需要overflow:hidden；。 您有两种选择：

过渡边框和填充，使它们一起折叠。 将目标div包装在新容器中，并设置其高度的动画。您将需要overflow:hidden；。

---

隐马尔可夫模型。。我假设，将高度、边框和填充物一起转换会导致每个刻度收缩3倍，直到边框消失，然后是每个刻度收缩2倍，直到填充物消失，然后是每个刻度收缩1倍，直到高度消失。。。。不是这样吗？将内容包装到另一个div中就成功了-谢谢。。我假设，将高度、边框和填充物一起转换会导致每个刻度收缩3倍，直到边框消失，然后是每个刻度收缩2倍，直到填充物消失，然后是每个刻度收缩1倍，直到高度消失。。。。不是这样吗？将内容包装到另一个div中就成功了-谢谢。

var Box = React.createClass({
  getInitialState: function () {
      return {
          open: false
      };
  },
  render: function () {
    var stuffs = this.state.open ? <div className="sub" /> : null;

    return (
      <div className="box">
        <button onClick={this.toggle}>Click Me</button>
        <span>{'Open: ' + this.state.open}</span>
        <CssTransitionGroup transitionName="slider">
          {stuffs}
        </CssTransitionGroup>
      </div>
    );
  },
  toggle: function () {
      this.setState({
          open: !this.state.open
      })
  }
});

.box {
  width: 100%;
  height: 200px;
  background-color: orange;
  clip: rect(10px 20px 20px 0px);
}

.sub {
  height: 3pc;
  background-color: lime;
  overflow: hidden;
  border-top: 4px solid black;
  padding-top: 50px;
}

.slider-enter {
    height: 0;
}

.slider-enter.slider-enter-active {
    height: 3pc;
    transition: height 1s ease-in;
}

.slider-leave {
    height: 3pc;
}

.slider-leave.slider-leave-active {
    height: 0;
    transition: height 1s ease-in;
}