如何使用绝对位置平滑拉伸 div？答案

【问题标题】：How to smoothly stretch div with position absolute?如何使用绝对位置平滑拉伸 div？
【发布时间】：2020-02-24 15:45:44
【问题描述】：

我无法将左上角的 div 平滑地拉伸到 100vh 高度和 100vw 宽度。 Box .btn 如我所愿顺利进行，但整个背景（div .red）有某种滞后，最后才顺利进行。请问有什么建议吗？ :)

@keyframes stretchIn {
  0% {
    height: 50vh;
    width: 50vw;
    z-index: 0;
  }
  100% {
    height: 100vh;
    width: 100vw;
    z-index: 1;
  }
}

body {
  background: #999;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body .red,
body .blue,
body .green,
body .yellow {
  position: absolute;
  z-index: 0;
  height: 50vh;
  width: 50vw;
}

body .red {
  top: 0;
  left: 0;
  background: #a04951;
  transition: 1s;
}

body .red:hover {
  animation: stretchIn 5s both;
}

body .red .btn {
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  top: 45%;
  left: 45%;
}

body .blue {
  background: #c06c84;
  top: 0;
  right: 0;
}

body .green {
  bottom: 0;
  left: 0;
  background: #6c5b7b;
}

body .yellow {
  bottom: 0;
  right: 0;
  background: #355c7d;
}

<div class="red">
  <div class="btn"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>

Codepen

【问题讨论】：

请在此处发布一个可重现的最小示例

标签： html css sass

【解决方案1】：

@dgknca 在将您的红色 div 放在前面的意义上是正确的。您的 div 没有滞后，它只是开始在其他 div 之后 拉伸（注意，它按顺序排在第一位，因此被后面的元素“覆盖”）。您可以使用 z-index 或更改元素的顺序：

@keyframes stretchIn {
  0% {
    height: 50vh;
    width: 50vw;
    z-index: 0;
  }
  100% {
    height: 100vh;
    width: 100vw;
    z-index: 1;
  }
}

body {
  background: #999;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body .red,
body .blue,
body .green,
body .yellow {
  position: absolute;
  z-index: 0;
  height: 50vh;
  width: 50vw;
}

body .red {
  top: 0;
  left: 0;
  background: #a04951;
  transition: 1s;
}

body .red:hover {
  animation: stretchIn 5s both;
}

body .red .btn {
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  top: 45%;
  left: 45%;
}

body .blue {
  background: #c06c84;
  top: 0;
  right: 0;
}

body .green {
  bottom: 0;
  left: 0;
  background: #6c5b7b;
}

body .yellow {
  bottom: 0;
  right: 0;
  background: #355c7d;
}

<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="red">
  <div class="btn"></div>
</div>

【讨论】：

【解决方案2】：

我从 z-index 开始使用悬停而不是从动画开始。

@keyframes stretchIn {
  to {
    height: 100vh;
    width: 100vw;
  }
}

body {
  background: #999;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.red,
.blue,
.green,
.yellow {
  position: absolute;
  z-index: 0;
  height: 50vh;
  width: 50vw;
}

.red {
  top: 0;
  left: 0;
  background: #a04951;
}

.red:hover {
  animation: stretchIn 5s both;
  z-index: 1;
}

.red .btn {
  position: relative;
  width: 50px;
  height: 50px;
  background: #fff;
  top: 45%;
  left: 45%;
}

.blue {
  background: #c06c84;
  top: 0;
  right: 0;
}

.green {
  bottom: 0;
  left: 0;
  background: #6c5b7b;
}

.yellow {
  bottom: 0;
  right: 0;
  background: #355c7d;
}

<div class="red">
  <div class="btn"></div>
</div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>

【讨论】：