动画增长的 div，然后动画子元素

Question

我正在尝试使用动画效果来使一个增长的

元素动起来，但我不希望内容看起来像随着它一起增长。在

元素进行动画变化时，内容应该保持不可见状态，一旦

元素完全增长，我希望内容变得可见（通过改变

元素内的标签的透明度实现）。

以下是

元素动画的代码：

@keyframes menu {
  0% {
    background-color: white;
    right: -25px;
    top: -25px;
    border-radius: 100px;
    width: 0px;
    height: 0px;
  }
  25%{
    right: -50px;
    top: -50px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
  }
  50% {
    right: -50px;
    top: -50px;
    width: 80px;
    height: 80px;
    border-radius: 100px;
  }
  75%{
    right:-50px;
    top:-50px;
    width: 150px;
    height: 150px;
    border-radius: 100px;
  }
  80%{
    right:-50px;
    top:-50px;
    width: 300px;
    height: 300px;
    border-radius: 300px;
  }
  100%{
    right:-150px;
    top:-150px;
    width: 450px;
    height: 450px;
    border-radius: 600px;
  }
}

这基本上是一个菜单，从角落开始增长，直到覆盖整个屏幕(在移动设备上)。我尝试添加a{ opacity: 1 };但我猜它不起作用。

- Greg

---

如果我理解正确的话，您想让一个div动画到特定大小，然后显示内容？ - Keyboard ninja

你是说像这个一样的东西吗？ - Harry

@Keyboardninja 是的，完全正确。 - Greg

@Harry，我觉得它没有生效，但是我知道你在尝试什么。让我在我的代码中试试看。 - Greg

@Greg：是的，这是因为在我的原始代码中该元素默认没有background-color。我已经更改了它并发布为答案。请检查是否有所帮助 :) 思路基本上是相同的。 - Harry

Answer 1

如果您希望锚文本（位于div内）仅在父div上的动画完全完成后可见，则需要向a添加另一个animation，并在延迟后将opacity从0动画到1，该延迟时间与父级的animation-duration相同。

div {
  background-color: black;
  line-height: 450px;
  text-align: center;
  animation: menu 4s linear forwards;
}
a {
  color: white;
  text-decoration: none;
  animation: display 1s linear 4s backwards;
}
@keyframes menu {
  0% {
    background-color: white;
    right: -25px;
    top: -25px;
    border-radius: 100px;
    width: 0px;
    height: 0px;
  }
  25% {
    right: -50px;
    top: -50px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
  }
  50% {
    right: -50px;
    top: -50px;
    width: 80px;
    height: 80px;
    border-radius: 100px;
  }
  75% {
    right: -50px;
    top: -50px;
    width: 150px;
    height: 150px;
    border-radius: 100px;
  }
  80% {
    right: -50px;
    top: -50px;
    width: 300px;
    height: 300px;
    border-radius: 300px;
  }
  100% {
    right: -150px;
    top: -150px;
    width: 450px;
    height: 450px;
    border-radius: 600px;
  }
}
@keyframes display {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div>
  <a href='#'>Some Menu Link</a>
</div>

- Harry

Answer 2

我会使用一些jQuery来实现这个。使用回调函数，您可以在 div 完全增长后调用 a 上的 opacity 1。

  $( ".yourdiv" ).animate({
    width: "450"
    height: "450"
  }, 5000, function() {
    //callback will cause the a to change its opacity only when the above function is complete
    $('.yourdiv a').css('opacity') = '1';
  });

- Henrique M.