CSS 过渡 - 将 child div 扩展到 parent 宽度和高度

Question

这是我的起点 - https://codepen.io/illianyh/pen/bGpJgma。

/*For IE CSS3 transition property works starting IE10*/
* {box-sizing: border-box;}
body {font-family: 'Playfair Display', serif; margin: 0;text-align: center}
h1 {font-weight: normal;color: #6A5953}
kbd {font-size: 0.9em;display:inline-block;line-height:1.1;}

div, h2, img {
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
h2 {
  color: #E39F81;
  text-shadow: 1px 1px 0 #FFE3BD;
}
h2:hover {
  text-shadow: 1px 1px 0 #FFE3BD, 2px 2px 0 #FFE3BD, 3px 3px 0 #FFE3BD, 4px 4px 0 #FFE3BD, 5px 5px 0 #FFE3BD;
  
}

.parent {
  width: 560px;
  height: 386px;
  margin: 0 auto;
  background: black;
  position: relative;
}

.box {
  width: 50%; 
  position: absolute;
  right: 0;
  top: 153px;
}

.four {
  width: 423px;
  height: 248px;
  background-color: #95A1B1;
  margin: 0 auto;
}
.four:hover {
  width: 500px;
  height: 300px;
  box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
}

<h1>CSS3 Transition examples</h1>
<div class="parent"></div>
<div class="box"><div class="four"><kbd>width, height, box-shadow</kbd></div></div>

</div>

如何使 child 向其 parent 的内部和顶部扩展，而不是向外扩展。

这是我要实现的图表：

初始状态（箭头代表child展开的方向）：

这是最终状态，最终 child div 与 parent 具有相同的宽度和高度。 parent 现在隐藏在 child 后面：

Answer 1

Parent 具有相对位置的固定大小
Child 具有百分比或任何大小类型，位置绝对且左上角位置与 parent 固定大小相关（可以是偶数百分比 parent）
过渡适用于已知尺寸

这是我为您修复的示例：CODEPEN

.parent {
  position:relative;
  width: 560px;
  height: 386px;
  margin: 0 auto;
  background: black;
  position: relative;
  background: red;
}
.child {
  position:absolute;
  background: blue;
  height:70%;
  width: 50%;
  right: -20%;
  top:15%;
  box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
  transition: all 0.5s ease; 
}
.parent:hover .child{
  top: 0%;
  right: 0;
  width:100%;
  height:100%;
  box-shadow: 0 0px 0px 0px rgba(0,0,0, .5);
}
.text{
  position:absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Answer 2

解决方法是首先将 child 放在 parent 的位置和大小，使其与 parent 完全一致（我们称之为 [=23= child 的实际位置）。然后使用带有缩放和平移函数的变换属性将 child 定位在其 starting 位置。最后，当用户将鼠标悬停在 child 上时，您将平移和缩放值重置为默认值。这具有将 child 动画化到实际位置的结果。

.parent {
  width: 200px;
  height: 150px;
  margin: 0 auto;
  background: black;
  position: relative;
}

.box {
  transform: translate(100px, 53px) scale(0.5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: .5s ease-in-out;
  background: orange;
}

.box:hover {
   transform: translate(0, 0) scale(1);
}

<h1>CSS3 Transition examples</h1>

<div class="parent">
  <div class="box"></div>
</div>

这是 FLIP 技术的简化版本。

CSS 过渡 - 将 child div 扩展到 parent 宽度和高度

CSS transition - expanding child div to its parent width and height

css

css-transitions