Javascript “我怎么能？”；掐；包含文本的元素？ 我想做什么

我的目标是转换一个列表，这样当单击一个项目时，它会平滑地上升到列表的顶部，成为标题（参见示例）。实际上，它下面会出现一个菜单UI。我可以转换所有元素的高度，但单击的元素除外，以便平滑地将其设置为列表顶部的动画。真管用！但是文本，当容器变得太小时，文本当然就消失了。我的意图是让文本也变得紧凑

---

我试过的 所以我当然必须使用变换。但是，转换会在视觉上挤压容器，但不会在物理上更改容器所在的空间，因此单击的列表项不会上升到顶部

最后，当我尝试同时变换一个容器并将其高度更改为零时，结果并不像预期的那样。转换考虑了高度的变化，此时文本仍然消失

此外，项目之间似乎形成了间隙，因为变换实际上考虑了高度变化，使它们在视觉上的变换速度超过了其尺寸收缩的速度

---

我的问题 如何同时变换容器并以平滑流畅的方式将其高度降为零，而文本在任何一点都不会消失，直到它被挤压到零高度为止（并且在过渡期间项目之间不会出现间隙）

---

例子：

//包含JQuery$的名称变量。。。
$（'.container'）。在（'mousedown touchstart'，function（）上{
$AllContainerExceptThis=$（'.container'）。不是（此）；
如果（！this.isSelected）{
$AllContainers，但this.css除外({
“转换”：“scaleY（0）”
});
$（this.css）({
“背景色”：“橙色”，
“颜色”：“FF3300”
});
this.isSelected=true；
}否则{
$AllContainers，但this.css除外({
“转换”：”
});
$（this.css）({
“背景色”：“，
“颜色”：”
});
this.isSelected=false；
}
});
@导入url(https://fonts.googleapis.com/css?family=Lobster);
html，
身体，
div{
填充：0；
保证金：0；
框大小：边框框；
}
.包装纸{
利润率：10px；
宽度：2英寸；
高度：3英寸；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
弯曲方向：立柱；
字体系列：“龙虾”，草书；
边框样式：实心；
边框宽度：1px；
边框颜色：浅灰色；
}
.wrapper>容器{
宽度：100%；
高度：0.6英寸；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
光标：指针；
过渡：变换0.3s，背景色0.3s，颜色0.3s；
}
.wrapper.container:第n个子项（偶数）{
背景颜色：浅灰色；
}
.wrapper.container:悬停{
背景颜色：灰色；
颜色：白色；
}
.wrapper>.container>.name{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-ms-flex-align：居中；
-webkit对齐项目：居中；
-webkit框对齐：居中；
对齐项目：居中；
弹性：1；
证明内容：中心；
指针事件：无；
}

一号货柜
二号货柜
三号货柜
四号货柜
也许你在找什么？
它是
溢出：可见
与变换的组合

为了更清晰地显示动画，我把它的速度放慢了不少

编辑：通过更改上下页边距而不是高度来解决间隙问题，因为更改高度会使缩放变换比原来更小


//包含JQuery$的名称变量。。。
$（'.container'）。在（'mousedown touchstart'，function（）上{
$AllContainerExceptThis=$（'.container'）。不是（此）；
如果（！this.isSelected）{
$AllContainers，但this.css除外({
“转换”：“scaleY（0）”，
“页边距顶部”：“-0.3英寸”，
“页边距底部”：“-0.3英寸”
});
$（this.css）({
“背景色”：“橙色”，
“颜色”：“FF3300”
});
this.isSelected=true；
}否则{
$AllContainers，但this.css除外({
“转换”：“，
“页边空白处”：“，
“页边距底部”：“
});
$（this.css）({
“背景色”：“，
“颜色”：”
});
this.isSelected=false；
}
});
@导入url(https://fonts.googleapis.com/css?family=Lobster);
html，
身体，
div{
填充：0；
保证金：0；
框大小：边框框；
}
.包装纸{
利润率：10px；
宽度：2英寸；
高度：3英寸；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
弯曲方向：立柱；
字体系列：“龙虾”，草书；
边框样式：实心；
边框宽度：1px；
边框颜色：浅灰色；
}
.wrapper>容器{
宽度：100%；
高度：0.6英寸；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
光标：指针；
转换：转换3s，背景色3s，颜色3s，页边顶部3s，页边底部3s；
背景颜色：浅粉色；
}
.wrapper.container:第n个子项（偶数）{
背景颜色：浅灰色；
}
.wrapper.container:悬停{
背景颜色：灰色；
颜色：白色；
}
.wrapper>.container>.name{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-ms-flex-align：居中；
-webkit对齐项目：居中；
-webkit框对齐：居中；
对齐项目：居中；
弹性：1；
证明内容：中心；
}

一号货柜
二号货柜
三号货柜
四号货柜
尝试使用
.slideUp（）
，
.slideDown（）


//包含JQuery$的名称变量。。。
$（'.container'）。在（'mousedown touchstart'，function（）上{
$AllContainerExceptThis=$（'.container'）。不是（此）；
如果（！this.isSelected）{
$AllContainers（此幻灯片除外）({
持续时间：500，
完成：函数（）{
$（this.css（'transform'，'scaleY（0）'））
}
});
$（this.css）({
“背景色”：“橙色”，
“颜色”：“FF3300”
});