Question

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

我希望在0.3s处转换内容框的高度和宽度，但希望溢出y位于1s或延迟相同。我大部分时间都试图这样做，以便在转换发生时，滚动条不会从那里闪烁。

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

Simplified Jsfiddle

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

1 个答案: