动画增长的 div 然后动画子元素答案

【问题标题】：Animate growing div then animate child element动画增长的 div 然后动画子元素
【发布时间】：2015-12-24 23:28:02
【问题描述】：

我目前正在尝试animate 一个不断增长的<div>，但我不希望内容看起来与它一起增长。当<div> 正在制作动画时，内容应该保持不可见，一旦它完全成长，我希望内容变得可见（通过更改<div> 中<a> 的不透明度）。

这是<div> 动画的代码：

@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 };，但我想它不会那样工作。

【问题讨论】：

如果我理解正确，您希望 div 动画到一定大小然后显示内容？
“我不想让你看到那个”....然后我会更改代码/内容，以便每个人都可以看到它，贡献您的其余代码并让我们提供帮助你。
你的意思是this？
@Keyboardninja 是的，没错
@Greg：是的，这是因为我的原始代码中的元素默认没有background-color。我已经更改并发布为答案。检查它是否有帮助:) 这个想法基本上是一样的。

标签： css animation css-animations

【解决方案1】：

如果您希望锚文本（在 div 内）仅在父 div 上的动画完全完成后可见，则将另一个 animation 添加到 a，为 opacity 设置动画在等于父级的animation-duration 的延迟后从 0 到 1。

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>

【讨论】：

【解决方案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';
  });

【讨论】：