CSS 过渡高度和填充

Question

我有一个 ReactJS 固定高度的子组件，我想使用transition: height.

.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;
}

这很有效，但是有问题的组件也有 aborder-top和 some padding-top。这不包括在高度过渡中，因此过渡不平滑。

例如：在“输入”时，边框和填充立即变得可见，然后组件的其余部分按预期显示。

jsbin 示例

我的问题：

您如何在transition: height规则中包含填充和边框的高度，或者是否有任何其他方法可以消除此问题？

任何 post-jsbin 世界的源代码副本：

反应组件：

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
      })
  }
});

CSS：

.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;
}

Answer 1

您有 2 个选择：

• 过渡边框和填充，使它们全部折叠在一起。
• 将目标 div 包装在一个新容器中，并为其高度设置动画。你会需要overflow: hidden;.