填充底部大小的框上的CSS转换行为怪异

Question

我正在尝试在相同方框的水平列表中设置一个底部填充大小的方框的动画。

动画包括改变它的比例(使其更宽(和一般大小(使其比其他大小更大(。问题是，当动画开始时，它会垂直移动其他长方体，最后恢复垂直定位。

我也在使用边距来向上移动(因为它更大(，并避免它在底部获得空间。简单地说，我使用边距来保持高度不变。

我注意到问题来自底部填充，即使一开始我认为是边缘部分。

这是主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是个好主意。我为你制作了一把小提琴。

稍后谢谢我。

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