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

Question

由于内容高度不同，我正在使用过渡最大高度而不是高度的技术，但我遇到了问题。

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

问题是如果我只在元素没有展开的时候设置overflow hidden，它会因为transition而跳转。这是一支笔，您可以看到它在跳跃:

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>