变换比例和调整外部内容

Question

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

.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;
}

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

Answer 1

一个解决方案是使用 max-height 来转换您的 div 而不是 transform 属性.

.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 2

您可以将 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>

Answer 3

如果您更改 .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>

变换比例和调整外部内容

Transform Scale and adjust outside content

html

css

css-transitions