转换比例并调整外部内容

Question

我有一个Password，我需要它在div和0之间缩放，但是后面的内容会保留在同一位置。如何增加div并修改周围的内容？
JSFiddle link

1

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  height: 200px;
}

Answer 1

如果您更改.div1的高度而不是对其进行缩放，则页面的其余部分将对其进行调整。

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  height:0; padding-top:0; padding-bottom:0; /* need to adjust height and padding */
}

.div1 {
  background-color: royalblue;
  padding: 15px;
  height: 200px;
  transition: padding-top 2s, padding-bottom 2s, height 2s; /* animate the padding too */
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  width:200px; height: 100%; vertical-align:top; /* and some adjustments here */
}

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

希望这会有所帮助！

---

编辑：OP的评论现在已经改变了问题，因此这是一个解决该问题的新片段。

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.transform:hover~.div2 {
  top:-230px;             /* Move div2 up by the height+padding of div1 */
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
  position: relative;  /* use relative positioning */
  top: 0;              /* Initial position is where it normally is */
  transition: top 2s;
}

img {
  height: 200px;
  vertical-align:top;
}

<div style="margin-top: 300px">TEXT</div>
<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

Answer 2

一种解决方案是使用max-height而不是transform属性来转换div。

.transform {
  background-color: slategray;

}

.transform:hover~.div1 {
  max-height: 0;
}

.transform:hover~.div1 img {
  max-height: 0;
}

.div1 {
  max-height: 600px;
  background-color: royalblue;
  padding: 15px;
  transition: max-height 0.5s;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
 max-height: 200px;
 transition: max-height 0.6s;
}

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

Answer 3

您可以将transform: scaleY(0);更改为height:0px;。它应该会给您相同的效果，但也要移动下面的div。我创建了一个示例，可以在下面为您提供帮助。

.container {
  display: flex;
  flex-direction: column;
}

.transform {
  background-color: slategray;
}

.div1 {
  background-color: royalblue;
  padding: 15px;
  transition: all 2s;
  height: 200px;
}

.transform:hover~.div1 {
  height: 0px;
  padding: 0px;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  height: 100%;
}

<div style="margin-top: 150px">

</div>

<div class="container">
  <div class="transform">TRANSFORM</div>
  <div class="div1">
    <img src="https://via.placeholder.com/500">
  </div>
  <div class="div2">
    <span>TEXT</span>
  </div>
</div>

<div style="margin-top: 200px">

</div>