缩放div并调整其父级大小

Question

我有这段代码：https://jsfiddle.net/56pghvt6/ 我希望我的父高可以适应他的可见内容但是当我将transform: scaleY(0)应用于子div时。实际上父母的身高不会改变。

精度：我使用ScaleY为鼠标悬停设置动画，因此display: none不是解决方案

有什么想法解决这个问题吗？

Answer 1

由于transform不影响元素的原始位置或大小，您还可以设置动画，例如max-height。

＆＃13;

＆＃13;

.parent{
  border: 1px solid red
}
.children{
  transition: transform .3s ease-in-out, max-height 0.3s ease-in-out;
  transform-origin: 0 0;
  max-height: 300px;
}
.parent:hover .children{
  transform: scaleY(0);
  max-height: 0;
}

＆＃13;

<div class="parent">
  <div class="intro">
    <p>Hover me</p>
  </div>
  <div class="children">
    <p>text line 1</p>
    <p>text line 2</p>
    <p>text line 3</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;