Question

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

这是<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 };，但我想它并不是那样的。

Answer 1

我会用一点jQuery来做到这一点。使用回调后，您可以在opacity 1完成后a上致电div。

  $( ".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';
  });

Answer 2

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

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

动画生长div然后动画子元素

2 个答案: