如何在高度过渡期间停止溢出自动显示滚动条

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

溢出不是动画的，但是您可以使用带有溢出的容器：隐藏并将过渡应用于该容器。

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

简化的JSFIDDLE