javascript - 使 div 更大并在悬停时向上动画更大的部分

Question

当用户将鼠标悬停在 div 上时，我正在尝试向上设置 div 的动画。

我能够为 div 制作动画，使其变大，但动画是向下发生的。我试图让 div 的底部保持在同一个位置，并有一个平滑的动画向上增加 div 的大小。

See jsfiddle here which演示我的代码当前正在做什么。

请看下面的代码:

.box {
  height: 170px;
  padding-bottom: 15px;
  width: 50%;
}

.content {
  background-color: #e3e4e6;
  height: 100%;
  text-align: center;
}

.content:hover {
  height: 110%;
}

<div class="box">
  <div class="content">TEST</div>
</div>

Answer 1

您可以使用 transform:scaleY() 并将 transform-origin 设置为 bottom 来执行此操作。我还放了一个 margin-top:100px 看效果更好。您也可以使用 transition 使比例更平滑

您还需要缩小文本。

参见此处: jsfiddle

您需要在缩放 div 的同时将文本缩放回其原始状态。因此，如果您将 div 缩放 2 次。您需要将文本缩小 1/2 ，如果您缩小 3 倍则相同...缩小 1/3

在这种情况下，您将 .content 放大了 1.5，因此您需要将里面的文本缩小 1/1.5 = 0.66

代码:

.box {
  height: 170px;
  padding-bottom: 15px;
  width: 50%;
}

.content {
  background-color: #e3e4e6;
  height: 100%;
  text-align: center;
  margin-top: 300px;
  transition:0.3s;
}

.content:hover p {
  transform: scaleY(0.66)
}

.content:hover {
  transform: scaleY(1.5);
  transform-origin: bottom;
}

<div class="box">
  <div class="content">
    <p>
      TEST
    </p>
  </div>
</div>