CSS padding-bottom 大小的盒子上的过渡行为很奇怪

Question

我正在尝试在相同框的水平列表中为一个大小为 padding-bottom 的框设置动画。

动画包括改变它的比例（让它变宽）和它的一般尺寸（让它比其他的大）。问题是，当动画开始时，它会垂直移动其他框，最后会恢复垂直定位。

我还使用边距将其向上移动（因为它更大）并避免它在底部获得 space。简而言之，我使用边距来保持高度不变。

我注意到问题出在 padding-bottom 上，即使一开始我认为是边距部分。

这是主要的css:

.item {
  display: inline-block;
  width: 20%;
  padding: 0 8px;
  box-sizing: border-box;
  transition: width ease-in-out 150ms;
}
.item:hover {
  width: 28%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 166%;
  background: violet;
  transition:
    padding ease-in-out 150ms,
    margin ease-in-out 150ms
  ;
}
.item:hover::after {
  padding-bottom: 130%;
  margin: -8.4% 0; /* this avoids to occupy space vertically */
}

这是我正在尝试做的，另一种类型的动画有同样的问题，但没有把盒子变大，所以问题显然是 padding-bottom 属性.

.container,
.container1 {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 10% 0;
  margin: -10% 0;
}

.item {
  display: inline-block;
  width: 20%;
  padding: 0 8px;
  box-sizing: border-box;
  transition: width ease-in-out 150ms;
}

.item:hover {
  width: 28%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 166%;
  background: violet;
  transition: padding ease-in-out 150ms, margin ease-in-out 150ms;
}

.container .item:hover::after {
  padding-bottom: 130%;
  margin: -8.4% 0;
}

.container1 .item:hover::after {
  padding-bottom: 116.495%;
}

<div style="padding: 100px 0 20px">
  Here the effect should be like scale, but occupying space horizontally
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div style="padding: 100px 0 20px">
  Here the effect should be like animating the width only, keeping the same height
</div>
<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

我认为使用 flexbox 是个好主意。我已经为你创建了一个fiddle。

稍后谢谢我。

.container, .container1 {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 10% 0;
  display: flex;
  flex-wrap: nowrap;
}

.item {
  display: inline-block;
  width: 20%;
  padding: 0 8px;
  box-sizing: border-box;
  transition: width ease-in-out 150ms;
}
.item:hover {
  width: 28%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 166px;
  background: violet;
  transition:
    padding ease-in-out 150ms,
    margin ease-in-out 150ms
  ;
}
.container .item:hover::after {
  padding-bottom: 188px;
}

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

希望对您有所帮助:)

.container, .container1 {
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    align-items: center;
}
.item {
  display: inline-block;
  width: 20%;
  padding: 0 8px;
  box-sizing: border-box;
  transition: all 0.5s ease;
}
.item:hover {
  transform: scale(1.2);
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 166%;
  background: violet;
  transition:
    padding ease-in-out 150ms,
    margin ease-in-out 150ms
  ;
}
.container1 .item:hover {
  transform: scale(0.8);
}

<div style="padding: 100px 0 20px">
  Here the effect should be like scale, but occupying space horizontally
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div style="padding: 100px 0 20px">
  Here the effect should be like animating the width only, keeping the same height
</div>
<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

谢谢

Answer 3

我找到了解决办法！

只是我使用了 vertical-align: middle 和一个更大的底片 margin。
这样，在动画播放过程中，由于自动垂直对齐，非同步过渡不会很明显。

它适用于显示的两个示例，即使在后者中更明显。

.container,
.container1 {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 10% 0;
  margin: -10% 0;
}

.item {
  display: inline-block;
  width: 20%;
  padding: 0 8px;
  box-sizing: border-box;
  transition: width ease-in-out 150ms;
  vertical-align: middle;
}

.item:hover {
  width: 28%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 166%;
  background: violet;
  transition: padding ease-in-out 150ms, margin ease-in-out 150ms;
}

.container .item:hover::after {
  padding-bottom: 130%;
  margin: -20% 0;
}

.container1 .item:hover::after {
  padding-bottom: 115%;
  margin: -20% 0;
}

<div style="padding: 100px 0 20px">
  Here the effect should be like scale, but occupying space horizontally
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div style="padding: 100px 0 20px">
  Here the effect should be like animating the width only, keeping the same height
</div>
<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS padding-bottom 大小的盒子上的过渡行为很奇怪

CSS transition on padding-bottom sized box act weird

css

css-transitions