隐藏了最大高度溢出"simulate"过渡的 CSS 过渡

Question

由于内容高度不同，我正在使用转换最大高度而不是高度的技术，但我有一个问题。

在增长或收缩的元素中，我有一个溢出的绝对定位元素，我想在扩展父元素时显示该元素。

问题是，如果我只设置元素未展开时隐藏的溢出，它会因为过渡而跳跃。这是一支笔，你可以看到它跳跃：

https://codepen.io/nicopavlotsky/pen/pozLBxY

使用此代码：

div{
transition: all .5s;
overflow: hidden;
}
div.active{
overflow: visible;
max-height: 10rem;
}

这是另一个它没有跳转但子元素被剪掉的地方：

https://codepen.io/nicopavlotsky/pen/yLBKrGW

div{
transition: all .5s;
overflow: hidden;
}
div.active{
max-height: 10rem;
}

有没有JS少的方法可以做到这一点？

Answer 1

可能提供所需结果的替代方法是按如下方式transform: scaleY()。

div {
transform-origin: top;
transform: scaleY(0);
}
div.active {
transform: scaleY(1);
}

下面是一个示例：

document.querySelector('button').addEventListener('click', function() {
document.querySelector('div').classList.toggle('active');
});

div {
width: 200px;
border: 2px solid red;
transform-origin: top;
transform: scaleY(0);
transition: all .5s;
position: relative;
}
div.active {
transform: scaleY(1);
}
span {
display: block;
position: absolute;
bottom: 3rem;
right: -1rem;
width: 2rem;
border: 2px solid blue;
height: 2rem;
}

<button>Toggle</button>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At porro veniam a iste deleniti possimus aliquam minima libero est blanditiis eligendi aut, eaque, quam sunt ducimus amet qui, quo aperiam!
</p>
<span></span>
</div>