css - 如何在高度转换期间停止自动溢出显示滚动条

Question

这最初是为了以不同的速度转换两个属性，但被告知您不能转换溢出。所以现在我只是问如何在高度转换期间停止自动溢出显示滚动条。原帖如下。

我想在 0.3s 时转换内容框的高度和宽度，但希望在 1s 时溢出-y 或延迟然后相同。我主要是试图做到这一点，以便在发生过渡时滚动条不会从那里闪烁到不闪烁。

.barOpen {
  -webkit-transition: height 0.3s ease-out
  height: 225px
  width: 98.5%
  margin: 0.25%
  padding: 0.5%
  background-color: #28251f
  color: white
  opacity: 1
  overflow-x: hidden
  overflow-y: auto
  float: left
 }
.barClose {
  -webkit-transition: height 0.3s ease-out
  width: 100%
  background-color: #d79e12
  height: 0
  overflow-x: hidden
  overflow-y: hidden
  float: left
 }

Answer 1

Overflow 不可设置动画，但您可以使用带 overflow: hidden 的容器并将过渡应用到该容器。

.barContainer {
  -webkit-transition: height 0.3s ease-out;
  width: 100%;
  overflow: hidden;
  float: left;
}

.barContainerOpen {
  background-color: #28251f;
  height: 225px;
}

.barContainerClose {
  background-color: #d79e12;
  height: 225px;
}

.bar {
  height: 225px;
  width: 98.5%;
  margin: 0.25%;
  padding: 0.5%;
  background-color: #28251f;
  color: white;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
 }

Simplified Jsfiddle