html - 如何在保持文本不动的情况下扩展包含文本的 div

Question

我想为我网站上的 Logo 创建一个效果，基本上我希望有一个 div 显示为一个点，首先扩展为一条水平线，这很容易通过动画零高度 div 的宽度来完成.

然后，我希望相对于平分水平轴增加 div 的高度(顶部和底部相互远离，而不仅仅是底部下降)。只需将 div 放在包含的 div 中并以包含的 div 扩展的相同速度为其填充设置动画，这也不难实现。

我的问题是内部 div 中的文本。当 div 展开时，我希望文本看起来是从其水平中心向外显示的。就像拉开舞台幕布，但幕布是水平的而不是垂直的。然而，目前，文本随着内部 div 移动，使其更像是从下方被拉入视野，而不是静止不动并被后退的内部 div 显露出来。

这是一个最小的功能示例:

@keyframes inner {
  from {
    height: 0;
  }
  to {
    height: 2em;
  }
}

@keyframes outer {
  from {
    padding: 1em 0;
  }
  to {
    padding: 0;
  }
}

.inner {
  overflow: hidden;
  animation: inner 3s;
  height: 2em;
  border: 1px solid blue;
}

.outer {
  animation: outer 3s;
  border: 1px solid red;
}

.text {
  text-align: center;
  margin: 5px auto;
}

<div class="outer">
  <div class="inner">
    <p class="text">TEXT</p>
  </div>
</div>

提前感谢您的帮助!

Answer 1

通过显示 absolute 将嵌套的 .text 元素从正常文档流中移除，并相对于包含它的父元素相应地定位它(.inner).

随着 .text 现在从文档流中移除并明确定义其位置，它不会受到其包含元素的比例变化(如 height)的影响。

代码片段演示:

@keyframes inner {
  from {
    height: 0;
  }
  to {
    height: 2em;
  }
}

@keyframes outer {
  from {
    padding: 1em 0;
  }
  to {
    padding: 0;
  }
}

.inner {
  overflow: hidden;
  animation: inner 3s;
  height: 2em;
  border: 1px solid blue;
  position: relative; /* required for nested absoulte element */
}

.outer {
  animation: outer 3s;
  border: 1px solid red;
}

.text {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 20px;
  margin: auto;
}

<div class="outer">
  <div class="inner">
    <p class="text">TEXT</p>
  </div>
</div>