jquery - 使用 CSS 和/或 jQuery 动画化一个 div 以显示绝对定位的内容

Question

我有一个容器，我想展开它以在容器完全展开后显示绝对位于右下角的内容。

使用 CSS 扩展容器非常简单。

@keyframes test-grow {
  100% {
    width: 100%;
    height: 30rem;
  }  
}

.test {
  width: 2rem;
  height: 2rem;
  animation: test-grow 5s forwards;
}

棘手的部分是揭示其中的内容。使用简单的绝对定位是行不通的，因为无论大小，内容都会固定在容器的右下角，因此随着容器的增长，它会随着容器的一 Angular 移动。

这是我想要实现的目标的快速 GIF 示例:http://imgur.com/pRneSJr但我的揭示会从一个 Angular 落到另一个 Angular 落很顺利。

我这里有一支笔:http://codepen.io/abbasinho/pen/QyrZOm?editors=1100显示容器动画。但您会看到我对内容的质疑。

如有任何帮助，我们将不胜感激。

Answer 1

繁荣。你去吧

.test {
  position: relative;
  width: 2rem;
  height: 2rem;
  background: rgba(white, 0.5);
  animation: test-grow 5s forwards;
  overflow:hidden;
}

h1 {
  font-family: Helvetica Neue, Helvetica, Arial;
  font-weight: bold;
  font-size: 200px;
  position: absolute;
  top:  18rem;
  left: 28rem;
}